乘风原创程序

  • axios的封装
  • 2020/9/28 12:23:53
  • axios的封装

    1. src文件夹下新建http文件夹,用来放网络请求相关的文件

    2. src/http文件夹下,创建index.js文件,对axios进行封装

      const axios=require('axios');   //创建axios对象
      axios.defaults.baseURL='http://127.0.0.1:8000/'; //vue请求后端地址
      axios.defaults.timeout=1000;                   //多久超时
       axios.defaults.withCredentials= true;          //携带cookie需要添加
      /**
       * 设置请求传递数据的格式(看服务器要求的格式)
       * x-www-form-urlencoded
       * 默认提交表单
       * 把数据对象序列化成 表单数据
       */
      //axios.default.headers['Content-Type']='application/x-www-form-urlencoded';
      //axios.default.transformRequest=data =>qs.stringify(data);
      /**
       *设置默认提交JSON
       * 把数据对象序列化成json字符串
       */
      axios.defaults.headers['Content-Type']='application/json';
      axios.defaults.transformRequest= data =>JSON.stringify(data);
      
      
      //请求拦截器
      axios.interceptors.request.use(config=>{
        //从localStorage获取token
        let token = localStorage.getItem('token');
        //如果有token,就把token设置到请求头中Authorization字段中
        token &&(config.headers.Authorization=token);
        return config;
      
        },error=>{
        return Promise.reject(error);
        }
      );
      
      //响应拦截器
      axios.interceptors.response.use(response=>{
        //当响应码 2xx的情况,进入这里
        return response.data;
        },error => {
        //当相应码不是2xx的情况,进入这里
        return error
        }
      );
      //get方法,对应get请求
      //@params{String} url[请求的url地址]
      //@params{Object} params[请求时携带的参数]
      export function get(url,params,headers) {
        return new Promise((resolve,reject)=>{
          axios.get(url,{params,headers}).then(res=>{
            resolve(res.data.ResultObj)
          }).catch(err=>{
            reject(err.data)
          })
          }
      
        )
      }
      //post方法,对应post请求
      export function post(url,params,headers) {
        return new Promise((resolve,reject)=>{
            axios.post(url,params,headers).then((res)=>{
              resolve(res.data)
            }).catch((err)=>{
              reject(err.data)
            })
          }
      
        )
      }
      
      export default axios;
      
    3. src/http目录下创建apis.js文件,用来写接口地址列表

      //接口信息,生成请求方法
      //请求后端django的地址
      //引入get方法,post方法
      
      import {get,post} from './index'
      
      //用户登录
      export const login = (params,headers) => post("/user/login/",params,headers)
      

    本文地址:https://blog.csdn.net/God_Hearing/article/details/108857845