vue-axios整合使用

惯例先安装axios，不多说！

cnpm install axios

1.axios配置 我的目录结构src/axios/index.js，axios配置都在该文件下

src/axios/index.js 如下：

import axios from 'axios' // axios 配置 axios.defaults.timeout = 5000; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; axios.defaults.baseURL = 'http://localhost:8008';

拦截器，axios.interceptors.request.use发送请求前处理 axios.interceptors.response.use接受返回后，回调之前处理处理

axios.interceptors.request.use((config) => { if (config.method === 'get') { // config.data = qs.stringify(config.data); config.data = JSON.stringify(config.data); } return config; },(error) =>{ return Promise.reject(error); }); //返回状态判断 axios.interceptors.response.use((res) =>{ if(!res.data.success){ //这里根据接口返回的实际情况来写 //这里是接口异常，可以统一弹窗提示错误信息 //ElementUI.Message.error(res.data.message); return Promise.reject(res); } return res; }, (error) => { //404等问题可以在这里处理 return Promise.reject(error); });

公共方法：

// POST export function post(api, params) { return new Promise((resolve, reject) => { params = JSON.stringify(params); axios.post(api, params) .then((response) => { resolve(response.data); }, (err) => { reject(err.data); }) .catch((error) => { reject(error); }); }); } //GET export function get(api, data) { return new Promise((resolve, reject) => { axios.get(api, { params: data }) .then((response) => { resolve(response.data); }, (err) => { reject(err); }) .catch((error) => { reject(error); }); }); }

如果不理解可以将以上代码依次copy到src/axios/index.js文件，当然axios.defaults.baseURL = 'http://localhost:8008'; 需要换成自己的api。 ——2019年11月17日更新

更多VUE相关问题，请关注公众号：【VUE全家桶】，2019年面试题系列正在更新，100期！不见不散