数据请求封装(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})}
vue.config.js 的代理 的代码注释:上面代码url地址中的api后面是后端地址;api 是我自己在vue.config.js中配置的代理(api就是后端接口的端口协议域名)
module.exports = {configureWebpack: {devServer: {proxy: {//名字可以自定义,这里我用的是api'/api': {target: '',//设置你调用的接口域名和端口号 别忘了加httpchangeOrigin: true,//这里设置是否跨域pathRewrite: {'^/api': ''}}}}},}