axios在项目中的的使用

最新推荐文章于 2025-11-13 16:02:22 发布

原创最新推荐文章于 2025-11-13 16:02:22 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#axios

js技术同时被 3 个专栏收录

25 篇文章

订阅专栏

vue

20 篇文章

订阅专栏

react

13 篇文章

订阅专栏

本文介绍了axios，这是一个基于Promise的HTTP客户端，适用于浏览器和Node.js环境。支持多种请求方式，包括GET、POST等，并提供并发请求处理功能。此外，还展示了如何配置axios并封装API。

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

引入方式：

$ npm install axios

$ cnpm install axios //taobao源

$ bower install axios

或者使用cdn：

举个栗子：

执行 GET 请求

// 向具有指定ID的用户发出请求

axios.get('/user?ID=12345').then(function (response) {

    console.log(response);

}).catch(function (error) {

    console.log(error);

});



// 也可以通过 params 对象传递参数

axios.get('/user', {

    params: {

    ID: 12345

}

}).then(function (response) {

    console.log(response);

}).catch(function (error) {

    console.log(error);

});

执行 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');

}



axios.all([getUserAccount(), getUserPermissions()])

.then(axios.spread(function (acct, perms) {

//两个请求现已完成

}));

axios API

可以通过将相关配置传递给 axios 来进行请求。

axios(config)

// 发送一个 POST 请求

axios({

method: 'post',

url: '/user/12345',

data: {

firstName: 'Fred',

lastName: 'Flintstone'

}

});

axios(url[, config])

// 发送一个 GET 请求 (GET请求是默认请求模式)

axios('/user/12345');

请求方法别名

为了方便起见，已经为所有支持的请求方法提供了别名。

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]]）

注意
当使用别名方法时，不需要在config中指定url，method和data属性。

并发

帮助函数处理并发请求。

axios.all（iterable）
axios.spread（callback）

实际项目中的应用

现将api封装为Promise形式　并可以设置axios的default值

import axios from "axios"
axios.defaults.baseURL = HOST
axios.defaults.timeout = 1000 * 200
axios.defaults.headers.authKey = Lockr.get('authKey')
axios.defaults.headers.sessionId = Lockr.get('sessionId')
axios.defaults.headers['Content-Type'] = 'application/json'


const apiMethods = {
  methods: {
    apiGet(url, data) {
      return new Promise((resolve, reject) => {
        axios.get(url, data).then((response) => {
          resolve(response.data)
        }, (response) => {
          reject(response)
          _g.closeGlobalLoading()
          bus.$message({
            message: '请求超时，请检查网络',
            type: 'warning'
          })
        })
      })
    },
    apiPost(url, data) {
      return new Promise((resolve, reject) => {
        axios.post(url, data).then((response) => {
          resolve(response.data)
        }).catch((response) => {
          console.log('f', response)
          resolve(response)
          bus.$message({
            message: '请求超时，请检查网络',
            type: 'warning'
          })
        })
      })
    },
    apiPostfile(url, data, config) {
      return new Promise((resolve, reject) => {
        axios.post(url, data, config).then((response) => {
          resolve(response.data)
        }).catch((response) => {
          console.log('f', response)
          resolve(response)
          bus.$message({
            message: '请求超时，请检查网络',
            type: 'warning'
          })
        })
      })
    },
    apiDelete(url, id) {
      return new Promise((resolve, reject) => {
        axios.delete(url + id).then((response) => {
          resolve(response.data)
        }, (response) => {
          reject(response)
          _g.closeGlobalLoading()
          bus.$message({
            message: '请求超时，请检查网络',
            type: 'warning'
          })
        })
      })
    },
    apiPut(url, id, obj) {
      return new Promise((resolve, reject) => {
        axios.put(url + id, obj).then((response) => {
          resolve(response.data)
        }, (response) => {
          _g.closeGlobalLoading()
          bus.$message({
            message: '请求超时，请检查网络',
            type: 'warning'
          })
          reject(response)
        })
      })
    },
    handelResponse(res, cb, errCb) {
      _g.closeGlobalLoading()
      if (res.code == 200) {
        cb(res.data)
      } else {
        if (typeof errCb == 'function') {
          errCb()
        }
        this.handleError(res)
      }
    },
    handleError(res) {
      if (res.code) {
        switch (res.code) {
          case 101:
            console.log('cookie = ', Cookies.get('rememberPwd'))
            if (Cookies.get('rememberPwd')) {
              let data = {
                rememberKey: Lockr.get('rememberKey')
              }
              this.reAjax('admin/base/relogin', data).then((res) => {
                this.handelResponse(res, (data) => {
                  this.resetCommonData(data)
                })
              })
            } else {
              _g.toastMsg('error', res.error)
              setTimeout(() => {
                router.replace('/')
              }, 1500)
            }
            break
          case 103:
            _g.toastMsg('error', res.error)
            setTimeout(() => {
              router.replace('/')
            }, 1500)
            break
          // case 400:
          //   this.goback()
          //   break
          default :
            _g.toastMsg('error', res.error)
        }
      } else {
        console.log('default error')
      }
    }
    
  },

}