axios 使用方法备忘录

一. axios 是什么

axios 在 web 前端或者 nodejs 后台都可以使用的/用来发送 http 请求的库

对于使用者而言, 它在前端或者 node.js 后台中的使用方法/api几乎是完全一致的

原理是根据在全局环境中是否有 XMLHttpRequest 或 process 对象来判断是在浏览器环境还是 nodejs 环境中, 从而调用封装的不同的请求方法
下面是axios源码区分前后台环境的代码

// ./lib/default.js 下, 适配前端或 nodejs 端的代码
function getDefaultAdapter() {
  var adapter;
  if (typeof XMLHttpRequest !== 'undefined') {
    // For browsers use XHR adapter
    adapter = require('./adapters/xhr');
  } else if (typeof process !== 'undefined') {
    // For node use HTTP adapter
    adapter = require('./adapters/http');
  }
  return adapter;
}

二. 使用方法

需要引入的库
  1. axios
  2. 没有了

在命令行运行 npm i axios 下载 axios

  • 在 nodejs 环境下:
const axios = require('axios')
const fs = require('fs')
  • 在前端环境下
import axios from 'axios'
  • 直接引入 cdn 的axios
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    需要注意的是: 前端环境没有 fs 库
    这里使用一个 log , 来代替 console.log
const log = console.log.bind(console)
后台调试设置

为了方便地调试axios, 准备了一个用 express 撸的5毛钱后台服务
代码在这里 https://github.com/xianjiezh/axios-demo/blob/master/server.js
使用方法: npm i express body-parser 后, 再命令行运行 node server.js
就会在本地开启一个端口 (3000) 提供调试

1. 发送 GET 请求
// 1. 在 url 里面携带参数
axios.get('http://localhost:3000/user?ID=12345')
  .then(res => {
    log('res1', res.data)
  })
  .catch(error => {
    log('error1', error)
  })

// 2. 将参数放到一个对象里面, axios会在内部将其拼接成上面的 url
// 和上面的请求是一样的
axios.get('http://localhost:3000/user', {
  params: {
    ID: 12345
  }
}).then(res => {
  log('res2', res.data)
}).catch(error => {
  log('error2', error)
})

// 3. 类似 jQuery 的写法, 传一个对象进去
// 注意, 这必须在服务端运行, 因为浏览器端没有 fs
// 这个请求会在当前目录创建一个图像文件
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(response => {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  })
2. 发送 POST 请求
// 1. 第二个参数放数据
axios.post('http://localhost:3000/user', {
  firstName: 'hh',
  lastName: 'xx'
})
  .then(res => {
    log('res3', res.data)
  })
  .catch(error => {
    log('error3', error)
  })
// 2. 类似 jQuery 的方式
axios({
  method: 'post',
  url: 'http://localhost:3000/user',
  data: {
    firstName: 'mmmmmmmmm',
    lastName: 'nnnnnnnnnn'
  }
})
  .then(res => {
    log('res4', res.data)
  })
  .catch(error => {
    log('error4', error)
  })
3. 并行请求
// then 里面回调函数内的第 n 个参数分别是第 n 个请求返回的数据
const request1 = function() {
  return axios.get('http://localhost:3000/random1')
}
const request2 = function() {
  return axios.get('http://localhost:3000/random2')
}
axios.all([request1(), request2()])
  .then(axios.spread((res1, res2) => {
    log('res1', res1.data)
    log('res2', res2.data)
  }))

创建一个实例

const instance = axios.create({
  baseURL: 'http://127.0.0.1:3000/',
  timeout: 3000,
})
// 实例的使用方法
instance.get('/user')
  .then(response => {
    log(response.data)
    log(response.status)
    log(response.statusText)
    log(response.headers)
    log(response.config)
  }).catch(error => {
    log('error', error.message)
  })

因为在创建实例的时候指定了 baseURL(注意URL这三个字母是大写的), 所以后面再使用这个实例请求时只需要加一个路径就可以了

配置
// 全局 axios 的配置
axios.defaults.baseURL = 'http://127.0.0.1:3000/'
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 在创建实例时配置实例的选项
const instance = axios.create({
  baseURL: 'http://127.0.0.1:3000/'
})
// 在创建实例后也可以指定默认选项
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN
// 配置先后顺序
// 在创建实例时, 如果不传入参数, axios 也会使用它的默认项
const instance = axios.create()
// 下面的配置会去覆盖 axios 默认的配置
// 请求的等待事件将会是 2.5s
instance.defaults.timeout = 2500
// 当次请求的 timeout 事件也可以设置
instance.get('/longRequest', {
  timeout: 5000
})

拦截器

可以设置对请求和响应的拦截(相当于一个中间件, 想想 express 的中间件)

axios.interceptors.request.use(config => {
  // config 包含发送出的数据, 可以在这里修改
  // 下面随机将请求方法改成 POST
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(res => {
  // 这里随机修改返回的数据
  if (Math.random() > 0.5) {
    res.data.message = 'hhhhhhhh'
  }
  return res
}, error => {
  // 可以对返回的 error 进行处理
  return Promise.reject(error)
})

// 移除拦截器
const myInterceptor = axios.interceptors.request.use(res => {
  //
})
axios.interceptors.request.eject(myInterceptor)

// 实例的拦截器
const instance = axios.create() 
instance.interceptors.request.use(res => {
  // 
})

错误处理

axios.post('/user', {
})
  .catch(error => {
    if (error.response) {
      // 由服务端触发的错误, 例如 404 502 一类
      // 状态码不在 [200, 300) 这一区间就会触发
      log('error.response', error.response)
    } else if (error.request) {
      // 已经发出了请求但是没有收到请求会触发此错误
      // error.request 在浏览器端是 XMLHttpRequest 的实例
      // 在 node.js 端是 http.clientRequest 的实例
      log('error.request', error.request)
    } else {
      // 在准备请求时(尚未发出)触发的错误
      log('error', error.message)
    }
  })

// 指定触发错误的 HTTP 状态码
axios.get('/user', {
  validateStatus: status => {
    // 这样就只会在状态码大于等于500时抛出错误
    return status < 500
  }
})
  .then(res => {
    log('res', res.data )
  })

取消请求

使用 cancel token 取消请求

const CancelToken = axios.CancelToken
const source = CancelToken.source()
// 这是一个可以被取消的请求
axios.get('/user', {
  cancelToken: source.token 
}).then(res => {
  log('res', res.data)
}).catch(error => {
  if (axios.isCancel(error)) {
    // 请求被取消
    log('cancel message ', error.message)
  } else {
    log('error', error)
  }
})
// 取消这个请求
source.cancel('user canceled this request')

// 以 POST 方法发送
axios.post('/user', {
  name: 'new name'
}, {
  cancelToken: source.token
})
// 取消这次的请求
source.cancel('user canceled this request')

// 创建 cancel token
const CancelToken = axios.CancelToken
let cancel 
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    cacel = c
  })
})
cancel()

完整代码地址: https://github.com/xianjiezh/axios-demo

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 157,298评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,701评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 107,078评论 0赞 237
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,687评论 0赞 202
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,018评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,410评论 1赞 211
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,729评论 2赞 310
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,412评论 0赞 194
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,124评论 1赞 239
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2赞 242
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1赞 257
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,268评论 2赞 251
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,894评论 3赞 233
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2赞 260

推荐阅读更多精彩内容

  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 8,613评论 0赞 3
  • 新鲜感
    这篇文章历时三天写完，所以心理状态几经波折。 迎新工作于10号结束，17级新生从11号开始了他们大学第一课，军训生...
    三小味阅读 445评论 0赞 0
  • 如今秋天的“北平”
    仍是秋天，仍是一年最明朗的日子。然而北山和西山的那抹蓝却不再加深，傍晚也再少有彩色的霞帔。但，不变的仍是秋的美！ ...
    石说_阅读 502评论 0赞 3