首页 > 其他分享> 文章详细

axios

2022-01-28 02:03:55 阅读：275 来源： 互联网

标签：function axios console log ret data

axios 概述
axios 基本用法
axios 全局配置
axios 常用 API
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)
})

标签：function,axios,console,log,ret,data
来源： https://www.cnblogs.com/gh-StudyNotes/p/15851739.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9