安装axios
npm install axios -D
-S
即--save(保存)
包名会被注册在package.json的dependencies里面,在生产环境下这个包的依赖依然存在
-D
即--dev(生产)
包名会被注册在package.json的devDependencies里面,仅在开发环境下存在的包用-D,如babel,sass-loader这些解析器
创建axios实例
在src下创建api文件夹并创建http.js、interface.js
http.js
import axios from 'axios'
// 创建axios实例
const service = axios.create({
// baseURL: baseUrl, // api 的 base_url
// baseURL: 'http://47.94.160.237:8888/', // api 的 base_url
// baseURL: 'http://localhost:8080/', // api 的 base_url
baseURL: 'http://localhost:8888', // api 的 base_url
method: "post",
timeout: 300000, // 请求超时时间
headers: {
"Content-Type": "application/json"
},
encode: "charset=utf-8",
withCredentials: true, // 默认携带cookies
})
// request 拦截器
service.interceptors.request.use(
config => {
return config
},
error => {
console.log(error) // for debug
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
return response.data
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default service
interface.js
import request from './http' // 使用实例
//get方法
export function contentDetail(params) {
return request({
url: '/superwbs-server/tech/contentDetail',
method: 'get',
params
})
}
//post方法
export function postGetUserAll(params) {
return request({
url: '/superwbs-server/tech/contentDetail',
method: 'post',
data: params
})
}
调用接口
import { contentDetail } from '@/api/interface' // 引入接口
export default {
data(){
return {};
},
created(){
this.getData();
},
methods:{
getData(){
let postData = {id:35} // 请求参数
contentDetail(postData).then(data => {
console.log(data);
})
},
}
}
原文未给出post方法的写法,本文在interFace.js
已给出
如果不想使用实例调用axios可以用以下方法
vue-Cli main.js
配置axios
main.js
示例
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.axios = axios
// 组件中通过使用this.axios调用
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
组件中调用
getUserAll() {
this.axios.post('http://localhost:8080/user/login', {
userName: 'admin',
passWord: 'admin'
}, {
headers: {"Content-Type": "application/json"}
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error);
});
}