axios 封装数据请求

数据请求封装（axios）

安装 axiosnpm i axios

创建request.js文件（这个文件是用来封装数据请求的）

数据请求代码（下面写了常用的get 和post请求）

import axios from 'axios'axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';axios.create({// baseURL: 'https://some-/api/',timeout: 5000,// headers: {'X-Custom-Header': 'foobar'}});//上面都是默认配置// 第2步开始封装const request = ({// axios选项(axios选项去axios.js 官网上找 文档 请求配置 (找需要的))url,method = 'get',headers,params,data,withCredentials = false}) => {return new Promise((resolve,reject) => {//1. 这是数据处理switch (method.toLowerCase()){case 'post':axios({url,method,headers,params,data,withCredentials :false}).then( res => resolve(res)).then( err => reject(err))break;default://get put deleteaxios({url,method,headers,params,withCredentials : false}).then( res => resolve(res)).then( err => reject(err))break;}//2. 拦截器（去axios.js官网上去找拦截器）// 添加请求拦截器axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});})}//导出export default request

使用

引入封装的代码import request from "../utils/request.js";两种方法：第一种promise方法 ;第二种async/await;方法 promise方法

request({url:'/api/addOrder',method:'post',data:params//传递的参数}).then( ( res ) => {console.log("请求的数据",res)} )

async/await;方法

async methodDataRequest () {let data = await request({url:'/api/addOrder',method:'post',data:params//传递的参数})console.log("请求的数据",data)}

请求地址再次封装

创建一个api文件夹（用来存放请求地址）在api文件夹下创建对应模块的js文件例如：hone.js 、login.js在js文件中封装代码 （先要引入封装好的axios代码）；

import request from "../utils/request.js";//引入封装好的axios文件export const $addOrder = (params) => {return request({url:'/api/addOrder',method:'post',data:params})}export const $orderPPXL = (data) => {return request({url:'/api/order/PPXL',method:'get',params:data})}

注释：上面代码url地址中的api后面是后端地址；api 是我自己在vue.config.js中配置的代理（api就是后端接口的端口协议域名）

vue.config.js 的代理 的代码

module.exports = {configureWebpack: {devServer: {proxy: {//名字可以自定义，这里我用的是api'/api': {target: '',//设置你调用的接口域名和端口号 别忘了加httpchangeOrigin: true,//这里设置是否跨域pathRewrite: {'^/api': ''}}}}},}