暴露实例
最后不要忘记将整个封装后的实例暴露出去：
//暴露文件 export default service
全部代码
/**** 全局封装axios配置与消息 ****/ // 导入axios import axios from 'axios' //导入QS import qs from 'qs' // 使用element-ui Message用以消息提醒 import { Message} from 'element-ui'; // 创建新的axios实例 const service = axios.create({ // 公共接口(暂未配置，预计写死) baseURL: "http://localhost:8081/api", // 超时时间 单位是ms timeout: 20 * 1000, }) // 请求拦截器 service.interceptors.request.use(config => { //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求添加 config.data = qs.stringify(config.data); //json数据转化 config.headers = { 'Content-Type':'application/x-www-form-urlencoded' //配置请求头 } //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie //判断localStorage是否存在token if (localStorage.getItem('token')) { //携带token到axios参数 config.headers.Authorization = '固定携带的头部'; config.params = { //固定携带参数 } } // const token = getCookie('名称');//这里取token之前，需要先拿到token,存一下 // if(token){ // config.params = {'token':token} //如果要求携带在参数中 // config.headers.token= token; //如果要求携带在请求头中 // } return config }, error => { Promise.reject(error) }) // 响应拦截器 service.interceptors.response.use(response => { console.log("进入响应拦截器"); //接收到响应数据并成功后的一些共有的处理，关闭loading等 return response }, error => { /***** 接收到异常响应的处理开始 *****/ if (error && error.response) { // 根据响应码具体处理 switch (error.response.status) { case 400: error.message = '错误请求' break; case 401: error.message = '未授权，请重新登录' break; case 403: error.message = '拒绝访问' break; case 404: error.message = '请求错误,未找到该资源' window.location.href = "/NotFound" break; case 405: error.message = '请求方法未允许' break; case 408: error.message = '请求超时' break; case 500: error.message = '服务器端出错' break; case 501: error.message = '网络未实现' break; case 502: error.message = '网络错误' break; case 503: error.message = '服务不可用' break; case 504: error.message = '网络超时' break; case 505: error.message = 'http版本不支持该请求' break; default: error.message = `连接错误${error.response.status}` } } else { // 超时处理 if (JSON.stringify(error).includes('timeout')) { Message.error('服务器响应超时，请刷新当前页') } error.message = '连接服务器失败' } Message.error(error.message) /***** 处理结束 *****/ return Promise.resolve(error.response) }) //暴露文件 export default service
封装请求信息
我们这只是封装了功能配置方面的代码，我们需要进一步封装需要携带的参数和baseURL后面路径。
网络异常，图片无法展示
|
看看这个，注意，baseURL与url不是同一个东西。
baseURL是固定的请求地址，url是请求地址后的路径。
比如baseURL是127.0.0.1/api/，url是/user，那这样，请求地址就是，127.0.0.1/api/user。
开始封装
创建一个js文件，我这叫http.js。
导入封装好功能的实例。
// 导入封装好的axios实例 import request from './request'
创建一个对象：
const http ={ //方法 }
里面可以写常用请求方法：
const http ={ /** * methods: 请求 * @param url 请求地址 * @param params 请求参数 */ get(url,params){ const config = { method: 'get', url:url } //如果非空，则添加参数，下文同理 if(params) config.params = params //调用封装好的axios实例，下文同理 return request(config) }, post(url,params){ const config = { method: 'post', url:url } if(params) { config.data = params console.log(config.data) } return request(config) }, put(url,params){ const config = { method: 'put', url:url } if(params) config.params = params return request(config) }, delete(url,params){ const config = { method: 'delete', url:url } if(params) config.params = params return request(config) } }
看看，这里面对不同请求都封装了方法，post、get、put等等。
我们以post方法为例：
post(url,params){ const config = { method: 'post', url:url } if(params) { config.data = params console.log(config.data) } return request(config) },
携带了两个参数，url和params，params是携带的参数。
创建一个配置对象config，对象method指定axios使用什么方法请求，url就不必说了。
然后给出一个判断：
if(params) { config.data = params }
如果有参数传入，我们就给config对象添加一个data，将参数赋值给data。
注意：
config就当作axios实例，所以字段是固定的，这里必须叫data。
然后返回中调用request，也就是axios实例，将配置携带在里面，这样这个config对象里面的配置就会与axios实例的字段信息相互补充，相当于为axios实例增加了method、url以及数据(如果不为null的话)。
这一层请求信息的封装也就好了，目的是补充配置。
封装请求方法
我们在封装一次调用方法，便于调用请求。
创建一个js文件，我这是api.js。
不罗嗦，贴上全部代码：
import http from '../utils/http' /** * @parms url 请求地址 * @param '/testIp'代表vue-cil中config，index.js中配置的代理 */ // get请求 function getListAPI(url,params){ return http.get(`${url}`,params) } // post请求 function postFormAPI(url,params){ return http.post(`${url}`,params) } // put 请求 function putSomeAPI(url,params){ return http.put(`${url}`,params) } // delete 请求 function deleteListAPI(url,params){ return http.delete(`${url}`,params) } // 导出整个api模块 export default { getListAPI, postFormAPI, putSomeAPI, deleteListAPI }
首先是导入上一层封装的请求信息。
import http from '../utils/http'
然后对应不同请求写不同方法。
以get为例：
// get请求 function getListAPI(url,params){ return http.get(`${url}`,params) }
携带参数url与params，然后调用第二次封装的方法。
话说这儿我是借鉴了许多网上的封装形式总结的，但是这一次我感觉必要性不大，但是应该是有意义的，我也不明白，有大佬看到还麻烦点醒一番。
最后单个暴露每个请求模块就可以。
// 导出整个api模块 export default { getListAPI, postFormAPI, putSomeAPI, deleteListAPI }
请求示范
网络异常，图片无法展示
|
这样调用起来也是挺方便的。
你只需要给出请求的后缀，比如你后端请求路径是/user，那就直接：
api.postFormAPI("/user, { //携带参数 topicUid: this.topic.topicUid, }).then( //..... )
