axios

2022/1/28 6:06:07

本文主要是介绍axios,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

@

目录
  • 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)
})


这篇关于axios的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程