Axios的基本使用

什么是axios？

Axios 是一个基于 Promise 的 JavaScript 库，用于在浏览器和 Node.js 环境中简化 HTTP 请求的发送和管理。它支持请求和响应拦截、自动 JSON 数据处理、取消请求等功能，是现代 Web 开发中的一个强大工具。

为什么使用axios？

其他常见的网络请求方法：

1. XMLHttpRequest (XHR):

   • 优点

     兼容性好，几乎所有浏览器都支持。

     提供了丰富的事件处理，可以处理进度、状态变化等。

   • 缺点

     API 较为复杂，使用起来不够简洁。

     不是基于 Promise 的，处理异步逻辑时可能需要编写回调函数。

2. Fetch API:

   • 优点

     现代浏览器内置，使用 Promise，易于编写异步逻辑。

     提供了简洁的 API 设计。

     支持流式传输和并行请求。

   • 缺点

     较新的浏览器才支持，需要 polyfill 来兼容旧浏览器。

     默认不处理 JSON 转换，需要手动调用 .json() 方法。

3. jQuery.ajax:

   • 优点

     语法简洁，易于使用。

     内置在 jQuery 库中，简化了 AJAX 请求的复杂性。

   • 缺点

     依赖 jQuery，如果项目中不使用 jQuery，则不推荐使用。

     随着现代浏览器内置 Fetch API 的普及，使用场景逐渐减少。

4. request:

   • 优点

     简洁的 API 设计。

     支持 Promise。

   • 缺点

     主要用于 Node.js 环境。

     社区支持和更新可能不如 Axios 活跃。

然而再看看Axios:

• 优点

  使用 Promise，使得请求的处理更加直观和简洁。

  支持 Node.js 和浏览器，跨平台兼容性。

  提供了丰富的配置选项和拦截器。

  拥有详尽的错误处理机制。

  自动转换 JSON 数据。

  支持请求取消和自动重试。

  拥有一个活跃的社区和丰富的插件生态。

• 缺点

  需要额外安装库，增加了项目依赖。

仅有的缺点就是要下载axios库，相比之下算是最能接受的一个缺点了。

如何使用axios？

下载axios

使用npm：

npm install axios

使用yarn:

yarn add axios

Axios 请求的两种途径

1、直接使用axios

（1） axios(config)

// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

（2） axios.请求方式别名(...)

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]]

axios.postForm(url[, data[, config]])

axios.putForm(url[, data[, config]])

axios.patchForm(url[, data[, config]])

注意：在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

2、创建axios实例

一般存放在/src/utils/ request.js文件中，主要书写axios的封装过程。例：

/****   request.js   ****/
// 导入axios
import axios from 'axios'
​
//1. 创建新的axios实例，
const service = axios.create({
  //这里写请求配置，如 
  //url(目标资源地址)
  //method(方法)
  //data(数据)
  //timeout(请求超时的毫秒数)
  //等等，详见后面的“请求配置”
  baseURL: 'https://api.example.com',
  timeout: 3000
})
​
// 2.请求拦截器
service.interceptors.request.use(
  config => {
    //发请求前做的一些处理，如数据转化，配置请求头，设置token，设置时间戳等
    //数据转化
    config.data = JSON.stringify(config.data);
    //配置请求头
    config.headers = {'Content-Type':'application/x-www-form-urlencoded'};
    //添加认证令牌token
    const token = localStorage.getItem('token')
    if (token) {config.headers.Authorization = `Bearer ${token}`}
    //加个时间戳
    config.params = {
      ...config.params,
      t: new Date().getTime(),
    };
    return config;
  }, error => {
    console.log(error)
    Promise.reject(error)
  })
 
// 3.响应拦截器
service.interceptors.response.use(
  response => {
     //这里写接收到响应数据后的一些处理
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200
     // 获取错误信息
     const msg = errorCode[code] || res.data.msg || errorCode['default']
     // 二进制数据则直接返回
     if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
       return res.data
     }
     // 当检测到请求状态码为401时，即未授权访问，触发以下逻辑
     if (code === 401) {
       //Relogin是重新登录的弹窗，开头要声明，这里只做演示
       if (!isRelogin.show) {
         isRelogin.show = true
         ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
         })
          .then(() => {
            isRelogin.show = false
            useUserStore()
              .logOut()
              .then(() => {
                location.href = '/index'
              })
          })
          .catch(() => {
            isRelogin.show = false
          })
      }
      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
    } else if (code === 500) {
      ElMessage({ message: msg, type: 'error' })
      return Promise.reject(new Error(msg))
    } else if (code === 601) {
      ElMessage({ message: msg, type: 'warning' })
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      ElNotification.error({ title: msg })
      return Promise.reject('error')
    } else {
      return Promise.resolve(res.data)
    }
     return response;
  }, error => {
     //这里做一些错误处理
     console.log('err' + error)
     let { message } = error
     if (message == 'Network Error') {
      message = '后端接口连接异常'
     } else if (message.includes('timeout')) {
      message = '系统接口请求超时'
     } else if (message.includes('Request failed with status code')) {
      message = '系统接口' + message.substr(message.length - 3) + '异常'
     }
     ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
     return Promise.reject(error)
})
​
//4.导出axios实例
export default service

然后就可以在api文件夹下封装api接口，例：

/****   login.js   ****/
import request from '@/utils/request'
​
// 登录方法
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  }
  return request({
    url: '/login',
    headers: {
      isToken: false,
      repeatSubmit: false
    },
    method: 'post',
    data: data
  })
}

接着就可以在页面中直接导入封装好的方法，并进行使用

请求配置

创建请求时可以用的配置选项：

url 是用于请求的服务器 URL

method 是创建请求时使用的方法

baseURL 将自动加在 url 前面，除非 url是一个绝对 URL。​ 它可以通过设置一个 baseURL便于为 axios 实例的方法传递相对 URL

params 是与请求一起发送的 URL 参数

 // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },

data 是作为请求体被发送的数据

  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  data: {
    firstName: 'Fred'
  },

timeout 指定请求超时的毫秒数。

  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)  

（以上只是常见的几种，其余详见axios官方文档）

响应结构

一个请求的响应包含以下信息，可以在响应拦截器里进行处理。

{
  // `data` 由服务器提供的响应
  data: {},
​
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
​
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
​
  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},
​
  // `config` 是 `axios` 请求的配置信息
  config: {},
​
  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

当使用 then 时，将接收入下相应：

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

默认配置

可以指定默认配置，它将作用于每个请求。

全局 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});
​
// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的优先级

配置将会按优先级进行合并。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。下面有一个例子。

// 使用库提供的默认配置创建实例
// 此时超时配置的默认值是 `0`
const instance = axios.create();
​
// 重写库的超时默认值
// 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
instance.defaults.timeout = 2500;
​
// 重写此请求的超时时间，因为该请求需要很长时间
instance.get('/longRequest', {
  timeout: 5000
});

拦截器的基本样式

//添加请求拦截器
​
axios.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
​
//添加响应拦截器
​
axios.interceptors.response.use(
    response => {
      return response;
    },
    error => {
      return Promise.reject(error);
    }
);

移除拦截器：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

给自定义的 axios 实例添加拦截器：

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

错误处理

axios.get('/user/12345')
  .catch(error =>{
    if (error.response){
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }else if(error.request){
      console.log(error.request);
    }else{
      console.log('Error', error.message);
    }
    console.log(error.config);
});

使用 validateStatus 配置选项，可以自定义抛出错误的 HTTP code。

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 处理状态码小于500的情况
  }
})

使用 toJSON 可以获取更多关于HTTP错误的信息。

axios.get('/user/12345')
  .catch(function (error) {
    console.log(error.toJSON());
  });

取消请求

AbortController

从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求：

const controller = new AbortController();
​
axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()