axios 封装数据请求

数据请求封装（axios）

1. 安装 axios npm i axios

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

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

   import axios from 'axios'
   
   axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
   
   axios.create({
       // baseURL: 'https://some-domain.com/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 delete
             axios({
               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
   

4. 使用

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

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

      2. async/await;方法

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

5. 请求地址再次封装

   1. 创建一个api文件夹（用来存放请求地址）
   2. 在api文件夹下创建对应模块的js文件例如：hone.js 、login.js
   3. 在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
          })
      }
      

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

   5. vue.config.js 的代理 的代码

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