JavaScript|vue 基于axios封装request接口请求——request.js文件 javascript|前端|axios|vue.js|vue

目录
了解几个Content-type类型
第一种：application/json; charset=UTF-8
第二种：multipart/form-data
第三种： application/x-www-form-urlencoded
第一步新建request.js文件
第二步新建services/apiUrl文件
第三步新建services/index.js文件
最后如何使用封装好的request请求

了解几个Content-type类型 Content-type类型：代表发送端（客户端|服务器）发送的实体数据的数据类型
格式：Content-Type：type/subtype ; parameter
* 要根据服务端定而定，否则一般情况无需做设置改动
/**
* get请求不存在设置Content-Type
* 只有post和put用到Content-Type
* content-type会根据参数的类型会自动有对应的值，一般无需设置
*/
第一种：application/json; charset=UTF-8 默认行参 axios.post(url,{a:1,b:2})
若不标注Content-type类型，则content-type默认是application/json; charset=UTF-8类型

文章图片

第二种：multipart/form-data 多用于图片上传
let formData = https://www.it610.com/article/new FormData() ;
formData.append('a',1);
formData.append('b',2)

文章图片

第三种： application/x-www-form-urlencoded let data = https://www.it610.com/article/{a:1,b:2}; axios.post(url,qs.stringify({ data }))

文章图片

例如服务端需要的类型为第三种，此时只需要统一设置请求前将参数变成字符串即可

// `transformRequest` 允许在向服务器发送前，修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream transformRequest: [function (data, headers) { // 对 data 进行任意转换处理 return data; }],

transformRequest: [ function (data) { return Qs.stringify(data) } ]；
还可查阅axios中文文档|axios中文网 | axios
还可查阅这篇文章-leoss.H
文件存放目录：

JavaScript|vue 基于axios封装request接口请求——request.js文件

文章图片

第一步新建request.js文件在serveces目录下新建request.js文件
1.定义request方法
2.创建axios实例
3. 为实例添加拦截器（在请求或响应被 then 或 catch 处理前拦截它们）
4.导出request

/* * 接口请求封装 */ import axios from "axios"; // 引入axios import config from 'utils/config.js' import com from 'utils/common.js' import { Message } from 'element-ui'; import Qs from 'qs' import loading from 'utils/loading'let options = {}; const NEED_TRANSLATE = [ // 需要转转字符串 'supply/purchase/orderVoided', 'upload-file/upload/files/delete', 'supply/issuing/detail', 'supply/costManage/confirmDeposit', 'supply/logistics/notifyArrivalTime', 'supply/logistics/detail' ]; const request = async function (opt) { try { options = Object.assign({ method: "get", // 默认get 请求 }, opt //参数 ); const res = await instance(options); return res; } catch (err) { return err; } }; // 创建axios实例 const instance = axios.create({ baseURL: config.baseUrl, timeout: 6000, // 请求超时日期 }); // 实例添加请求拦截器 instance.interceptors.request.use((requestConfig) => {loading.showLoading(); if (/get/i.test(requestConfig.method)) { // 判断get请求 requestConfig.params = requestConfig.params || {}; requestConfig.params.timeStamp = Date.parse(new Date()) / 1000; // 添加日期戳 }const token = com.getSession(config.USER_TOKEN); const userId = com.getSession(config.USER_ID); if (!com.isNullOrEmpty(token)) { requestConfig.headers.Authorization = 'bearer ' + token; } if (!com.isNullOrEmpty(userId)) { requestConfig.headers['user-id'] = userId }if (NEED_TRANSLATE.find(n => requestConfig.url.indexOf(n) > -1)) { requestConfig.data = https://www.it610.com/article/Qs.stringify(requestConfig.data) // requestConfig.headers["Content-type"] = "application/x-www-form-urlencoded" }return Promise.resolve(requestConfig); }, (error) => { // 对请求错误做处理... return Promise.reject(error); }); // 实例添加响应拦截器 instance.interceptors.response.use((response) => {loading.hideLoading(); if ((response.status >= 200 && response.status < 300) || response.status === 304) { // 如果http状态码正常，则直接返回数据 return response.data; } }, (error) => { // 对响应错误做处理... loading.hideLoading(); if (error.response) { switch(error.response.status){ case 401: Message.error({ duration: 1500, message: error.response.data.message, onClose() { $com.jumpTodoOffical('expiredToken'); } }) break; case 402: break; case 403: break; default: Message.error({ duration: 1500, message: error.response.data.message, }) break; } return Promise.reject(error.response); } }); export default request;

第二步新建services/apiUrl文件该文件是api接口地址的汇总

/* * api接口地址汇总 */export const apiUrl = { // 用户权限 apiPermission: function(param){ return `system/menu/${param.name}/2` },// 用户认证列表 apiAuthList: 'platform/customer/authList',// 用户认证提交审核 apiAuthCustomerSave: 'platform/customer/saveApproval',// 船运信息-删除 apiShippingDel: function(params){ return `supply/shipping/${params.id}` }, }

第三步新建services/index.js文件在services目录下新建index.js,该js会将API接口和request相互关联起来，并挂载在vue原型上。
【JavaScript|vue 基于axios封装request接口请求——request.js文件】services/index.js文件：

/* * 生成接口，并将接口挂载到vue的原型上 */import Vue from 'vue'; import request from './request'; import { apiUrl } from './apiUrl'; const services = {}; Object.entries(apiUrl).forEach((item) => { services[item[0]] = function (options = {},urlParams={}) { return request(Object.assign({ url: typeof(item[1])==='function'? item[1](urlParams):item[1] }, options)) } })// 将services挂载到vue的原型上 // 业务中引用的方法：this.$services.接口名（小驼峰） Object.defineProperty(Vue.prototype, '$services', { value: services }); export default services;

在mian.js 中引入services/index.js

// main.js import './services'

最后如何使用封装好的request请求 this.$services.接口名

// get 请求 this.$services.apiAuthList({ method: 'get', params: { orgId: this.paramsInfo.orgId, creditId: this.paramsInfo.creditId, } }).then(res => { if (res && res.code === 2000) { //todo } else { this.$message.error({ message: res.message }) } })// post请求 this.$services.apiAuthCustomerSave({ method: 'post', data: { orgId: this.paramsInfo.orgId, creditId: this.paramsInfo.creditId, } }).then(res => { if (res && res.code === 2000) { //todo } else { this.$message.error({ message: res.message }) } })// 这里通过一个多余的{} 为url接口传递参数 this.$services.apiShippingDel({ method: "delete", },{ id: row.id }).then((res) => { if (res && res.code === 2000) { this.$message.success("删除成功"); this.getPageList(); } else { this.$message.error(res && res.message); } });

搞定