欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

axios的封装

程序员文章站 2022-07-08 12:30:27
axios的封装src文件夹下新建http文件夹,用来放网络请求相关的文件src/http文件夹下,创建index.js文件,对axios进行封装const { data } = require('autoprefixer');const axios = require('axios');const { error } = require('shelljs');axios.defaults.baseURL = 'http://192.168.56.100:8888' //vue请求后端...

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

相关标签: vue