Axios二次封装

目录

Axios是什么

特性：

Axios安装

Axios实例

创建一个实例

Axios封装

请求拦截器

响应拦截器

 封装get

封装post

封装请求

---

Axios是什么

是一个基于promise网络请求库，作用于node.js 和浏览器中。 它是 isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性：

• 从浏览器创建XMLHttpRequests 
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

Axios安装

npm install axios

 Axios API

post发起一个请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

发起多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

Axios实例

创建一个实例

您可以使用自定义配置新建一个实例。

axios.create([config])

const http = axios.create({
  baseURL: '',
  timeout: 1000,
  headers:{'Content-Type':'application/json'}
});

Axios封装

请求拦截器

let loadingInstance 
//请求拦截器 对所有的axios请求做一个拦截
axios.interceptors.request.use(
  config=>{
    loadingInstance = ElLoading.service({ fullscreen: true })
    // 在发送请求之前做些什么
    config.headers.token =  localStorage.getItem("token")
    return config
  },
  error=>{
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

响应拦截器

//响应拦截器
axios.interceptors.response.use(
  response=>{
    loadingInstance.close()
    response.headers.token && localStorage.getItem('token',response.headers.token)
    // 对响应数据做点什么
    return response
  },
  error=>{
    loadingInstance.close()
    // 对响应错误做点什么
    return Promise.reject(error)
  }
);

 封装get

const ajax = {
  get(url,data,config={}){
    return hood({
      url:url,
      method:'get',
      params:{
        ...data
      },
      ...config
    })
  },

封装post

post(url,data,config={}){
    return hood({
      url:url,
      method:'post',
      data:data,
      ...config
    })
  }
}

封装请求

import ajax from './hood'
export const Login = async(data)=>{
  let res = await ajax.get('/login',{...data})
  return res
}
export const post = async function(){
  let res = await hood.post('').then
}