其实自己也不太懂，就参考别人的加上自己的一点点理解来写吧，能怎么样呢，都是从模仿开始嘛~
首先当然是要安装axios啦 npm i axios -S
然后在src目录下新建一个文件夹来存放封装的文件和api文件 在http.js文件下编写具体的封装方法：
// 引入axios import axios from 'axios' // 这个是elementui的组件，用来接口返回错误的时候弹出消息，可以用自己喜欢的组件代替 import {Message} from 'element-ui' /** * 请求失败后的错误统一处理 * @param {Number} status 请求失败的状态码 */ const errorHandle = (status, other) => { // 状态码判断 状态码跟后端协商好 switch (status) { // 401: 未登录状态，跳转登录页 case 401: Message.error('请求参数错误') break // 403 token过期 // 清除token并跳转登录页 case 403: Message.error(other) break // 404请求不存在 case 404: Message.error(other) break default: Message.error(other) } } // 创建axios实例 var instance = axios.create({ timeout: 1000 * 12 }) // 设置post请求头 instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' /** * 请求拦截器 * 每次请求前，如果存在token则在请求头中携带token */ instance.interceptors.request.use( config => { // 登录流程控制中，根据本地是否存在token判断用户的登录情况 // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码 // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。 // const token = store.state.token token && (config.headers.Authorization = token) return config }, error => Promise.error(error) ) // 响应拦截器 instance.interceptors.response.use( // 请求成功 res => { if (res.status === 200) { if (res.data.error_code === 0) { return Promise.resolve(res.data) } } // 这里其实是用上面的那个统一处理失败信息的方法 // 但是这边的话就能先稍微处理一下一些比较固定的错误信息 // 比如像请求参数错误，接口依然是返回200，但是200下面是会返回请求参数错误，所以想统一处理一下 // 然后其他需要另外处理的错误，在最后return返回，这样就能在组件里面另外处理了。 // 这个应该会有更好的处理方法，但是以我这样的小菜鸡也不太懂，就暂时用自己的方法处理吧~ switch (res.data.error_code) { // 10001: 请求参数错误 case 10001: Message({ message: '请求参数错误', type: 'error', duration: 1000 }) break // 403 token过期 // 清除token并跳转登录页 case 403: Message.error(res.data.reason) break // 404请求不存在 case 404: Message.error(res.data.reason) break default: return Promise.reject(res.data) } }, // 请求失败 error => { if (error) { // 请求已发出，但是不在2xx的范围 errorHandle(error.status, error.data.message) return Promise.reject(error) } else { // 处理断网的情况 // eg:请求超时或断网时，更新state的network状态 // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏 // 关于断网组件中的刷新重新获取数据，会在断网组件中说明 // if (!window.navigator.onLine) { // store.commit('changeNetwork', false) // } else { // return Promise.reject(error) // } return Promise.reject(error) } } ) export default instanceok，上面的就是http.js的内容啦，然后就开始编写baseURL.js文件了， 其实我觉得不需要也无所谓吧⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄， 不过这么写就可以更加方便的管理我们的接口域名啦~
/** * 接口域名的管理 */ const base = { // 借用一下嘿嘿~ tt: 'http://v.juhe.cn/toutiao', // 头条 db: 'https://douban.uieee.com' // 豆瓣 } export default base最后就是写api.js文件了
import axios from './http' // 注意路径啦~ import QS from 'qs' const base = '/api' // 解决跨域问题，跨域问题真的太讨厌了~ const api = { // post方法 getLogin(params) { return axios.post(`${base}/login`, QS.stringify(params)) }, // get方法 getUsersList(params) { return axios.get(`${base}/users`, {params: params}) }, // put方法 changeUsersStatus(id, state) { return axios.put(`${base}/users/${id}/state/${state}`) } // 如需传参数可以这样 changeUsersStatus(id, state, params) { return axios.put(`${base}/users/${id}/state/${state}`, {params: params}) } } export default api最后需要在main.js文件引用api.js文件：
import api from '@/axios/api' //引入api.js文件，注意路径 // 将api文件挂载到vue实例上，这样就可以不用每一个文件都要引用这个文件 // 在组件上用的话就直接用this.$http.xxxx就行了 Vue.prototype.$http = api然后在组件上这样调用：
methods: { this.$http.login({ type: 'top', key: '136c500303493492d6f855c6a62f48ee' }) .then(res => { // 要判断 res 是否存在，不然如果接口能够接通只是返回的是200以外的话，也会成功只是不会返回数据 if(res){ console.log(res) this.$message({ message: '登录成功', type: 'success', duration: 1000 }) localStorage.setItem('token', 'abcdefg') this.$router.push('index') } }) .catch({ // 如果需要另外处理错误信息的话就需要写这个，如果不需要的话就不用写啦 // 比如在封装那里已经定义好如果返回401就弹出层提示的就不需要写这个了。 }) }最后解决跨域的问题：
// 在config文件夹下的index.js里面，修改proxyTable的配置就好了： proxyTable: { '/api': { target:'http://v.juhe.cn/toutiao',//请求域名 头条 //secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true,//如果是跨域访问，需要配置这个参数 pathRewrite: { '^/api': '' } } } // 在调用接口的时候前面加上'/api'， // 例如，调用头条的接口：http://v.juhe.cn/toutiao/index // 在上面的配置里先设置好请求域名：http://v.juhe.cn/toutiao // 然后再在调用接口的组件上直接写：axios.get(`/api/index`, { params }) // 或者可以将'/api' 定义成常量，再调用： const base = '/api' // 解决跨域问题 axios.get(`${base}/index`, { params })以上就是全部内容，虽然不是很完美，但是至少能用吧，希望以后能封装得更好吧…
