axios的基本用法

二哈没烦恼

已于 2023-02-10 10:31:50 修改

阅读量2.5k

点赞数 2

文章标签：前端 javascript vue.js

于 2023-02-10 10:06:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45774558/article/details/128964275

版权

Axios是一个基于promise的HTTP库，用于浏览器和node.js，支持异步请求、拦截器、多种数据格式响应。本文介绍了Axios的安装、基本使用、配置选项以及如何设置拦截器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

什么是Axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特点

基于promise的异步ajax请求库
浏览器端/node端都可以使用
支持请求/响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

安装

1. 下载依赖包

npm install axios --save-D

2. 在需要的组件中引入

import axios from "axios" //导入axios

案例

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

axios基本使用

axios常用语法

nam	value
axios(config)	通用/最本质的发任意类型请求的方式
axios(url[,config])	可以只指定url发get请求
axios.request(config)	等同于axios(config)
axios.get(url[,config])	发get请求
axios.delete(url[,config])	发delete请求
axios.post(url[,data,config])	发post请求
axios.put(url[,data,config])	发put请求
axios.defaults.xxx	请求非默认全局配置
axios.interceptors.request.use()	添加请求拦截器
axios.interceptors.response.use()	添加响应拦截器
axios.create([config])	创建一个新的axios
axios.Cancel()	用于创建取消请求的错误对象
axios.CancelToken()	用于创建取消请求的token对象
axios.isCancel()	是否是一个取消请求的错误
axios.all(promise)	用于批量执行多个异步请求

axios配置

请求地址：url: '/user'
请求类型：method: 'get'
请求根路径：baseURL: 'http://www.mt.com/api'
请求前的数据处理：transformRequest:[function(data){}]
请求后的数据处理： transformResponse: [function(data){}]
自定义的请求头：headers:{'x-Requested-With':'XMLHttpRequest'}
URL查询对象：params:{ id: 12 },
查询对象序列化函数：paramsSerializer: function(params){ }
request body：data: { key: 'aa'}
超时设置：timeout: 1000,
跨域是否带Token：withCredentials: false
自定义请求处理：adapter: function(resolve, reject, config){}
身份验证信息：auth: { uname: '', pwd: '12'}
响应的数据格式json / blob /document /arraybuffer / text / stream：responseType: 'json'

响应结构

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

配置默认值

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
    // 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_API,
    // 超时
    timeout: 10000000
})

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

方法：
axios.interceptor.request.use()请求拦截器
axios.interceptor.response.use()响应拦截器

例子：

// request拦截器
service.interceptors.request.use(config => {
    // 是否需要设置 token
    const isToken = (config.headers || {}).isToken === false
        // 是否需要防止数据重复提交
    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
    if (getToken() && !isToken) {
        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
        let url = config.url + '?' + tansParams(config.params);
        url = url.slice(0, -1);
        config.params = {};
        config.url = url;
    }
    if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
        const requestObj = {
            url: config.url,
            data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
            time: new Date().getTime()
        }
        const sessionObj = cache.session.getJSON('sessionObj')
        if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
            cache.session.setJSON('sessionObj', requestObj)
        } else {
            const s_url = sessionObj.url; // 请求地址
            const s_data = sessionObj.data; // 请求数据
            const s_time = sessionObj.time; // 请求时间
            const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
            if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
                const message = '数据正在处理，请勿重复提交';
                console.warn(`[${s_url}]: ` + message)
                return Promise.reject(new Error(message))
            } else {
                cache.session.setJSON('sessionObj', requestObj)
            }
        }
    }
    // console.dir(config)
    return config
}, error => {
    // console.log(error)
    Promise.reject(error)
})



// 响应拦截器
service.interceptors.response.use(res => {
        // 未设置状态码则默认成功状态
        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
        }
        if (code === 401) {
            if (!isRelogin.show) {
                isRelogin.show = true;
                MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
                    confirmButtonText: '重新登录',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    isRelogin.show = false;
                    store.dispatch('LogOut').then(() => {
                        location.href = '/index';
                    })
                }).catch(() => {
                    isRelogin.show = false;
                });
            }
            return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
        } else if (code === 500) {
            Message({
                message: msg,
                type: 'error'
            })
            return Promise.reject(new Error(msg))
        } else if (code !== 200) {
            Notification.error({
                title: msg
            })
            return Promise.reject('error')
        } else {
            return res.data
        }
    },
    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) + "异常";
        }
        Message({
            message: message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)