axios的封装

本文主要是介绍axios的封装，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

axios的封装

【官网】

• 下载

#不仅开发需要，线上程序也需要
npm install axios

一、基本使用

• axios(config)

axios({   	
    url:'http://123.207.32.32:8000/home/data',
    method:'get',
    //专门针对get的参数拼接
    params:{
        type:'pop',
        page:1
    }
}).then(res=>{
    console.log(res);
})

二、发送并发请求

• axios.all(iterable)，类似于Promise.all，都请求完才能往下执行

axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/data?type=sell&page=2',
  }),
  axios({
    url:'http://123.207.32.32:8000/home/data',
    params:{
      type:'pop',
      page:6
    }
  })
]).then(results=>{
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})

• axios.spread(callback)

axios.all([
  axios({
    baseURI:'http://123.207.32.32:8000',
    timeout:5,
    url:'/home/data?type=sell&page=2',
  }),
  axios({
    timeout:5,
    url:'http://123.207.32.32:8000/home/data',
    params:{
      type:'pop',
      page:6
    }
  })
]).then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2);
}))

三、创建实例

• axios.create([config])

//创建实例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
//发送网络请求
instance({
    url:'/home/data',
    method:'get',
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

四、请求配置

注：post 请求参数传data， get请求参数传params

{
  // 请求地址
  url: '/user',  
  //请求类型，默认get
  method: 'get', 
  //请求根路径，将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  baseURL: 'https://some-domain.com/api/',
  /* `transformRequest` :
     允许在向服务器发送前，修改请求数据
     只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
     后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream*/
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    //对 data 进行任意转换处理
    return data;
  }],
  //自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  //与请求get一起发送的 URL 参数
  params: {
    ID: 12345
  },
   // `paramsSerializer` 是一个负责 `params` 序列化的函数
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  /* `data` 
    作为请求主体被发送的数据
    只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
    在没有设置 `transformRequest` 时，必须是以下类型之一：
    - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
    - 浏览器专属：FormData, File, Blob
    - Node 专属： Stream*/
  data: {
    firstName: 'Fred'
  },

  // 超时设置(0 表示无超时时间),如果超过时间，请求将被中断
  timeout: 1000,

   //跨域请求时是否带token
  withCredentials: false, // default

  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

 // `auth` 身份验证信息，表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

   // 响应的数据格式，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

 
  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  }
    
}

五、封装request模块过程

/*******普通封装，request(config,success,failure)********/
import axios from 'axios'
export function request(config,success,failure) {
  //1、创建axios实例
  const instance=axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:50000
  })
  //发送真正的网络请求
  instance(config).then(res=>{ 
      success(res)//执行请求成功的函数
  }).catch(err=>{
      failure(err)//执行请求失败的函数
    })
}

import  {request} from "./api/request";
request({
 url:'/home/multidata'
},res=>{
  console.log(res);
},err=>{
  console.log(err);
})


/**********普通封装，request(config)***************/
export function request(config) {
  //1、创建axios实例
  const instance=axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:50000
  })
  //发送真正的网络请求
  instance(config.baseConfig).then(res=>{
      config.success(res)//执行请求成功的函数
    })
    .catch(err=>{
      config.failure(err)//执行请求失败的函数
    })

}
import  {request} from "./api/request";
request({
  baseConfig:{
    url:'/home/multidata'
  },
  success(res){
     console.log(res)
  },
  failure(err){
      console.log(err)
  }
})


/****Promise形式封装，request(config).then().catch()***/
export function request(config) {
  return new Promise((resolve, reject) => {
    //1、创建axios实例
    const instance=axios.create({
      baseURL:'http://123.207.32.32:8000',
      timeout:50000
    })
    //发送真正的网络请求
    instance(config).then(res=>{
       resolve(res)
     }).catch(err=>{
       reject(err);
     })
  })

}

import  {request} from "./api/request";
request({
    url:'/home/multidata'
}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
});//.then前面就是，return new Promise 就是request的结果


/*******Promise形式封装，request(config).then().catch()*********/
//axios实例本身就是个Promise,所以不需要再包一层Promise
export function request(config) {
  //1、创建axios实例
  const instance=axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:50000
  });
  //2、axios的拦截
  //拦截全局
  // axios.interceptors
  //拦截实例
  // 2.1请求拦截
  instance.interceptors.request.use(config=>{
       // console.log(config);
       //1.比如config种的一些信息不符合服务器的要求。需要变化之后再给服务器传出去
       //2.比如每次发送网络请求时，都希望在界面种显示一个请求的图标。然后再响应成功中将它隐藏起来
      // 3、某些网络请求（比如登录 (token)），必须携带一些特殊的信息。如果没有登录就给用户拦截一些提示，让用户去登录
       return config;//拦截后需要将config给返回出去
    },err=>{
      // console.log(err);
  });
  // 2.2响应拦截
  instance.interceptors.response.use(res=>{
    console.log(res);//将结果拦截掉了，处理完要return出去
    return res.data;
  },err=>{
    console.log(err);
  });

  //3、发送真正的网络请求
 // instance(config) 返回值就是一个Promise
 return instance(config)
}

六、最终封装的request模块

• api/requset.js

//对axios进行二次封装
import axios from "axios";

//1、利用axios对象的方法create,去创建一个axios实例
const requests =axios.create({
    //配置对象
    //基础路径，requests发出的请求在端口号后面会跟改baseURl
    baseURL:"/api",
    //代表请求超时的时间5s
    timeout:5000,
})
//请求拦截器，在请求发出之前做些事情
requests.interceptors.request.use((config)=>{
   //config:配置对象，对象里面有个属性很重要，header请求头
   return config
})
//响应拦截器,对响应的数据做一些操作
requests.interceptors.response.use((res)=>{
    //成功回调函数，服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data
},(error)=>{
    //响应失败回调函数，如终结Promise链
    return Promise(new Error('fail'));
})
//对外暴露
export default requests;

• 接口统一管理 api/index.js

//当前这个模块:AIP进行统一管理
import requests from "./request";
//三级联动的接口
export const reqCategoryList=()=>requests({url:'/product/getBaseCategoryList',method:'get'})
//获取搜索模块
export const reqGetSearchInfo=(params)=>requests({url:'/list',method:'post',data:params})

• 发请求

import {reqGetSearchInfo} from '@/api'

//通过api里面的接口函数调用，向服务器发请求，获取服务器数据
async getSearchInfo((params={}){
    //params默认是个空对象
    let result = await reqGetSearchInfo(params);
    // console.log(result.data);
    if(result.code==200){
       /**/
    }
}

this.getSearchInfo(this.searchParams)

这篇关于axios的封装的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！