axios 基本了解和使用

123 阅读1分钟

axios 本质:基于 promise 对于的 HTTP 库的二次封装;

对调用 api 接口之后丢结果处理语法与 promise 一致

官方例子:

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

通过例子不难发现 axios 请求之后其实和利用 return new Promise 对 Ajax 请求进行封装很类似

所以在后续对 axios 进行一个封装后使用的时候 可以通过 return 请求接口 返回一个 promise 对象

方便在调用的时候进行一个 promise 语法使用

PS(封装后一个使用例子):

// request  为 axios 实例
export function getInfo() {
  return request({
    url: '/account/info',
    method: 'get'
  })
}

//使用

getInfo().then(response => {
        // todoList 
 })

接下来对 axios 进行一个全局封装

////request.js 文件


import axios from 'axios' // 引入

// 创建实例 并且设置部分默认固定属性
const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  withCredentials: true, // 跨域请求是否需要凭证
  timeout: 30000
})

// 请求拦截器
request.interceptors.request.use(
  config => {
     // 请求前添加上 token
    const token = getToken()
    if (token) {
      config.headers['Authorization'] = token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  
  export default request

以上就是对 axios 进行一个简单封装使用的全部