@

• axios 概述
• axios 基本用法
• axios 全局配置
• axios 常用 API
  • axios.get() / axios.delete() 请求参数传递
  • axios.post() / axios.put() 请求参数传递
  • axios()
• axios 拦截器
  • 请求拦截器
  • 响应拦截器
• 在异步函数中使用 axios

axios 概述

Axios 官网 | Axios 中文网 (axios-http.cn)
Axios 中文文档_w3cschool

axios 是一个基于Promise 用于浏览器和 node.js 的 HTTP 客户端
它具有以下特征：
⚫支持浏览器和 node.js
⚫支持 promise
⚫能拦截请求和响应
⚫自动转换 JSON 数据
⚫能转换请求和响应数据

axios 基本用法

使用 axios 前先需导入 axios.js

axios.method(url, options).then(ret => {
	// ret(自定义) : 服务器响应结果
	console.log(ret)
	// data 是 固定名称， 用于获取后台响应的数据
	console.log(ret.data)
})

• url
  请求地址，请求参数格式可以是 查询字符串， 也可以是路由参数
• method:
  常见的请求方法，比如get、post、delete、put
• options
  参数对象

  // 格式一: params对象会被axios转化为 url 中的查询参数, 'uname=lisi&id=2' 多用于get请求等
  {
  	params: {
  		uname: 'lisi',
  		id: 2
  	}
  }
  
  // 格式二: 表示 请求体 中的参数，格式为 json
  {
  	uname: 'lisi',
  	id: 2
  }
  

• ret
  表示 axios 把服务器响应结果包装成的一个对象，通常结构如下
  • data ： 实际响应回来的数据，可以是对象
  • headers ：响应头信息
  • status ：响应状态码
  • statusText ：响应状态信息

axios 全局配置

⚫// 设置超时时间
axios.defaults.timeout = 3000; 
⚫// 设置默认地址
axios.defaults.baseURL = 'http://localhost:3000/app'; 
⚫// 设置请求头
axios.defaults.headers[‘mytoken’] = ‘aqwerwqwerqwer2ewrwe23eresdf23’

eg:

// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
// 配置请求头信息
axios.defaults.headers['mytoken'] = 'hello';
axios.get('axios-json').then(function(ret){
  console.log(ret.data.uname)
})

axios 常用 API

• axios.get()
• axios.post()
• axios.delete()
• axios.put()

axios.get() / axios.delete() 请求参数传递

// axios get请求传参 通过 URL 传递参数
// 方式一：通过查询字符串传递
axios.get('http://localhost:3000/axios?id=123').then(function(ret) {
    console.log(ret.data)
})
// 方式二: restful 形式传递
axios.get('http://localhost:3000/axios/123').then(function(ret) {
    console.log(ret.data)
})
// 方式三：通过params  形式传递参数， 与查询字符串形式等效 
axios.get('http://localhost:3000/axios', {
    params: {
        id: 789
    }
}).then(function(ret) {
    console.log(ret.data)
})

// axios delete 请求传参, 与get()类似, 同样可用 查询字符串形式、 restful形式 来传参
axios.delete('http://localhost:3000/axios', {
  params: {
    id: 111
  }
}).then(function(ret){
  console.log(ret.data)
})

axios.post() / axios.put() 请求参数传递

// axios.post 请求传参  
//方式一：通过选项传递参数, 参数格式为 josn格式
axios.post('http://localhost:3000/axios', {
  uname: 'lisi',
  pwd: 123
}).then(function(ret){
  console.log(ret.data)
})

// 方式二： 通过 URLSearchParams 传递参数（application/x-www-form-urlencoded）
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
  console.log(ret.data)
})

// axios put 请求传参， 和post 传参类似 同样可以通过 URLSearchParams 传递参数
axios.put('http://localhost:3000/axios/123', {
    uname: 'lisi',
    pwd: 123
}).then(function(ret) {
    console.log(ret.data)
})

axios()

axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：

axios({
	method: '请求类型',
	url: '请求的URL地址',
	data: { /* POST数据 */ },
	params: { /* GET参数 */ }
}) .then(callback)

• axios() 发起GET请求

axios({
	method: 'GET',
	url: 'http://www.example.top:3006/api/get',
	params: { // GET 参数要通过 params 属性提供
		name: 'zs',
		age: 20
	}
}).then(function(res) {
console.log(res.data)
})

• axios() 发起POST请求

axios({
method: 'POST',
url: 'http://www.example.top:3006/api/post',
data: { // POST 数据要通过 data 属性提供
	bookname: '攻略富婆走上巅峰',
	price: 666
}
}).then(function(res) {	
	console.log(res.data)
})

axios 拦截器

请求拦截器

在请求发出之前设置一些信息

//添加一个请求拦截器
axios.interceptors.request.use(function(config){
	// 通过 axios api 发送的请求都会走到这一步
	console.log(config)
	// 通过对config对象 在请求发出之前进行一些信息设置
	// 配置完后，需要 return 出去 config配置对象, 否者配置不成功
	return config;
},function(err){
	// 处理响应的错误信息
	console.log(err)
});

• config对象：
  

响应拦截器

在获取数据之前对数据做一些加工处理

//添加一个响应拦截器
axios.interceptors.response.use(function(res){
	console.log(res)
	//在这里对返回的数据进行处理
	return res;
},function(err){
	// 处理响应的错误信息
	console.log(err)
})

• res对象
  这里的 res 对象，其实就是 axios api发送请求到服务器响应回来并被包装的结果对象
  
  eg:

// 请求拦截器
axios.interceptors.request.use(function(config) {
  // 更具需要可判断当次请求的url
  console.log(config.url)
  // 设置 请求头中的 `mytoken` 字段
  config.headers.mytoken = 'nihao';
  return config;
}, function(err){
  console.log(err)
})

// 响应拦截器
axios.interceptors.response.use(function(res) {
  var data = res.data;
  return data;
}, function(err){
  console.log(err)
})

axios.get('http://localhost:3000/adata').then(function(data){ // 这里的 data 是 响应拦截器里 return 出来的数据
  console.log(data)
})

在异步函数中使用 axios

/*
  async/await处理多个异步任务
*/
axios.defaults.baseURL = 'http://localhost:3000';

async function queryData() {
  var info = await axios.get('async1');
  var ret = await axios.get('async2?info=' + info.data);
  return ret.data;
}

queryData().then(function(data){
  console.log(data)
})