步骤一: 安装
npm install --save axios // 安装 axios
npm install --save vue-axios // 安装 axios 插件库(可安装也可以不安装)
步骤二: 在 src 文件下创建一个 api.js 文件
import axios from 'axios';
axios.defaults.baseURL = '接口地址的前缀(如:http://47.94.4.201)'
// 多少秒之内请求完成,否则报错
axios.defaults.timeout = 30000;
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
//可以写if判断,提前拦截错误信息
// 判断状态
// if (response.status == 200) {
// return response;
// }
// 不判断状态
return response;
}, function (err) {
return Promise.reject(err);
});
export function apiGet(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params,
headers:{"token":sessionStorage.getItem('token')}
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
});
}
export function apiPost(url, params){
return new Promise((resolve, reject) => {
axios({
method: 'post',
url:url,
data:params
}).then(res => {
resolve(res.data);
}).catch(err =>{reject(err.data)})
});
}
步骤三:在 main.js 文件中声明原型使用它
import { apiGet, apiPost } from './api/ApiPackage'
Vue.prototype.$apiGet = apiGet
Vue.prototype.$apiPost = apiPost
步骤四:在页面中使用
// get请求
this.$apiGet('接口地址').then(res=>{代码逻辑})
// post请求
this.$apiPost('接口地址',传递的参数).then(res=>{代码逻辑})