• 封装axios


    axios常用方式:
    axios({
    // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // 默认是 get // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'https://some-domain.com/api/', // `transformRequest` 允许在向服务器发送前,修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream transformRequest: [function (data) { // 对 data 进行任意转换处理 return data; }], // `transformResponse` 在传递给 then/catch 前,允许修改响应数据 transformResponse: [function (data) { // 对 data 进行任意转换处理 return data; }], // `headers` 是即将被发送的自定义请求头 headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` 是即将与请求一起发送的 URL 参数 // 必须是一个无格式对象(plain object)或 URLSearchParams 对象 params: { ID: 12345 },// `data` 是作为请求主体被发送的数据 // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH' // 在没有设置 `transformRequest` 时,必须是以下类型之一: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - 浏览器专属:FormData, File, Blob // - Node 专属: Stream data: { firstName: 'Fred' }, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间) // 如果请求话费了超过 `timeout` 的时间,请求将被中断 timeout: 1000, // `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // 默认的 );

    2、创建axios实例

    请求公共部分
    const instance =axios.create({ baseUrl:
    'http://www.com',
    timeout:1000, })
    不同的部分将配置作为参数传递到instance中
    instance(config)
    config:{url,data||params,method}
    instance({url,data||params,method})

    3、基础封装

    export function request(config){
      //创建axios实例
      const instance = axios.create({
        baseUrl:' ',
        timeOut:1000,
        
      })
      // 添加请求拦截器
      instance .interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
          return config;
        }, function (error) {
          // 对请求错误做些什么
          return Promise.reject(error);
      });
    
      // 添加响应拦截器
      instance .interceptors.response.use(function (response) {
          // 对响应数据做点什么
          return response;
        }, function (error) {
          // 对响应错误做点什么
          return Promise.reject(error);
        });
      return instance(config)
    }
    

     4、使用

    import {request} from '@/request'
    //get请求?param=1&&..
    export function ExampleInter (data){
      return request({ method:'get', params:data, url:''
    }) } //get请求url/1/2 export function ExampleInter (data){
    return request({ method:'get', url:`url/${data.id}/${data.ids}` }) } //post请求 export function ExampleInter (data){ return request({
    method:'post', data, url:''
    }) }

      

    import axios from 'axios'
    import Qs from 'qs'
    import store from '@/vuex/store'
    import Router from '@/router/index'
    import { Message } from 'element-ui';
    export function request(config){
        // console.log("baseUrl",baseUrl.uploadUrl);
        const instance =axios.create({
            baseURL:baseUrl.uploadUrl,
            timeout:5000,
            transformRequest: [function (data) {
            // 对 data 进行任意转换处理
            return Qs.stringify(data)
          }],
        })
        instance.interceptors.request.use((config)=>{
            // console.log("config",config);
            let token=store.state.token?store.state.token:sessionStorage['token'];
            if (token) {  // 判断是否存在token,如果存在的话,则每个http header都加上token
                config.headers.token = token;
                // console.log('interceptors config=',config)
            }
            // this.$store.commit('')
            //一般在这之前对config做处理
            return config;//config为请求配置,须返回config
        },function(error){})
        // console.log('dddd',store.state.isShowMessage)
        instance.interceptors.response.use((response)=>{
    
            // console.log("response",response)
            // console.log('dddd',store.state.isShowMessage)
            if(response.data.errcode=="500405"){
                Router.push('/login');
            }
            // console.log(re)
            if(store.state.isShowMessage&&!response.data.ret){
                console.log("response error");
                store.commit('setIsShowMessage',false);
                Message.error(
                    {
                        showClose: true,
                        message: response.data.errmsg,
                        type: 'error',
                        onClose:function(){
                            store.commit('setIsShowMessage',true)
                        }
                    }
                )
                return false;
            }
            return response
        },function(error){
            console.log("error",error)
        })
    
        return instance(config);
    }
  • 相关阅读:
    CentOS-7 本地yum源挂载
    VMware 安装 Centos7
    linux永久关闭SELinux*
    linux添加用户
    git分支常用命令
    git 常用命令
    springboot 自定义interceptor 对请求进行拦截
    ORACLE 远程导出DMP文件
    解决idea2018无法安装lombok的问题
    centos下快速安装mysql
  • 原文地址:https://www.cnblogs.com/shui1993/p/13415140.html
Copyright © 2020-2023  润新知