vue的axios的封装，我们经常会复用

为什么要封装axios呢？

以下几点原因：

1. 配置通用项

2. 统一处理请求错误，进行提示

首先我们再src下新建axios文件夹

新建api.js,这个文件就是你的通用js

import { fetch } from './fetch' // 引用fetch.js
import api from './url' // 引用url.js
// 查看用户
export function lookOption (issuer, userId) {
// lookOption是你要调用接口的名字，issuer,userId是传进来的参数
return fetch({
// api.Hallowmas 引用url.js里面的数据
url: api.Hallowmas + '/halloween/' + issuer + '/question',
method: 'get', // 请求方法
params: {
currentUserId: userId // 传过去的参数
}
})
}
export function lists (typeid, page, pagesize) {
return fetch({
url: api.plus + '/ajax_list.php',
method: 'get', // 请求方法
params: {
ajax: 'sjfk',
typeid: typeid, // 传过去的参数
page: page || 1,
pagesize: pagesize || 16
}
})
}
export function article (aid, channel) {
return fetch({
url: api.plus + '/view_ajax.php',
method: 'get', // 请求方法
params: {
ajax: 'sjfk',
aid: aid, // 传过去的参数
channel: channel || 1
}
})
}
export function typemenu (typeid, type, field) {
return fetch({
url: api.plus + '/type_ajax.php',
method: 'get', // 请求方法
params: {
type: type || 'ajax',
typeid: typeid || 0,
field: field || 'typename,id,icon,channeltype'
}
})
}
// 有新接口的时候像上面那样再来一次
// // 修改昵称接口
// export function userID(name){
//   return fetch({
//     url:api.myself_name,
//     method:"put",
//     data:{
//       nickname:name
//     }
//   })
// }
//
//
// //取消转发赞踩接口
// export function cancelForward(articleId,type){
//   return fetch({
//     url:api.detail_article+articleId+"/forwarded_impress",
//     method:"delete",
//     params:{
//       type:type
//     }
//   })
// }

新建url.js,主要是一些字段之类的配置文件

export default {
Hallowmas:'/api',
plus:'/plus',
//接口代理配置
}
//也可以像下面这样，区分环境或者区分服务器等等
// let service = 'dev';
// // let service = 'prod';
// let api = '';
// if (service === 'dev') {
//   /**dev开发**/
//   api = '/stomatology/patient';
// } else if (service === 'prod') {
//   /**prod部署**/
//   api = '/proxy/client';
// }
//
// export default {
//   /**个人中心start**/
//   //1 获取c端个人信息 POST /wx/getClientInfo
//   getClientInfo: `${api}/wx/getClientInfo`,
//   //2 获取手机注册验证码 POST /wx/getClientRegisterCode
//   getClientRegisterCode: `${api}/wx/getClientRegisterCode`,
//   //3 绑定手机号 POST /wx/clientBindMobile
//   clientBindMobile: `${api}/wx/clientBindMobile`,
//   /**个人中心end**/
//
// }

新建fetch.js,涉及到调用后返回和携带通用的自定义配置

import axios from 'axios'//引入axios
export function fetch (options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
// instance创建一个axios实例，可以自定义配置，可在 axios文档中查看详情
// 所有的请求都会带上这些配置，比如全局都要用的身份信息等。
headers: {
'Content-Type': 'application/json',
// 'token_in_header': global_.token,//token从全局变量那里传过来
},
timeout: 30 * 1000 // 30秒超时
})
instance(options)
.then(response => {
// then 请求成功之后进行什么操作
resolve(response)
// 把请求到的数据发到引用请求的地方
})
.catch(error => {
console.log('请求异常信息：' + error)
reject(error)
})
})
}

然后我们就可以在组件内使用了

import { lists } from '../axios/api' //lists是引入的组件内的函数名

created () {
lists(1).then(res =>{
console.log(res)
}).catch(err =>{
console.log(err)
})
}

注意的是我plus配置转发的规则！

在config/下的index.js内

dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/plus': {
target: 'http://localhost:96',
changeOrigin: true,
pathRewrite: {
'^/plus': '/plus'
}
},
'/ws/*': {
target: 'ws://127.0.0.1:8082',
ws: true
}
},