axios的封装

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