大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
什么是axios
Axios
是一个基于 promise
的 HTTP
库,可以用在浏览器和 node.js
中。
主要的作用:axios
主要是用于向后台发起请求的,还有在请求中做更多是可控功能。
axios有8个特性
- 从浏览器中创建 XMLHttpRequests
- 从 `node.js 创建 http 请求
- 支持
Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换
JSON
数据 - 客户端支持防御
XSRF
安装
安装十分简单,使用 npm
:
npm install axios
案例
执行 GET
请求
axios
.get("请求地址", {
// 拼接参数写在params中
params: {
ID: 12345,
},
})
// 成功后做的事情
.then(function (response) {
console.log(response);
})
// 失败后做的事情
.catch(function (error) {
console.log(error);
});
执行POST
请求
axios
.post("请求地址", {
firstName: "jkc",
lastName: "123",
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行并发请求,当我们想要同时发出2个请求,可以使用axios.all()
function getUserAccount() {
return axios.get("/user/12345");
}
function getUserPermissions() {
return axios.get("/user/12345/permissions");
}
axios.all([getUserAccount(), getUserPermissions()]).then((res) => {
console.log(res);
});
以上代码我们先定义了2个方法,每个方法都会发送一个请求,最后把2个方法都放在数组中,这样程序就会同时执行2个方法,且最后的结果是在数组中,结果如下:
上面返回的结果是在数组中,到时候取结果的时候就要用res[0]
,如果你觉得这样麻烦,如果我们想展开的话,可以使用axios.spread
方法
axios.all([getUserAccount(), getUserPermissions()]).then(
axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
})
);
此时,我们返回的结果就不是一个数组了,会分开来,结果如下:
axios请求配置
以下是创建请求时可以用的配置选项。只有 url
是必需的。如果没有指定 method
,请求将默认使用 get
方法。
{
// `url` 是用于请求的服务器 URL
url: '/user',
// `method` 是创建请求时使用的方法
method: 'get', // default
// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},
// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
data: {
firstName: 'Fred'
},
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间,请求将被中断
timeout: 1000,
// `auth` 表示应该使用 HTTP 基础验证,并提供凭据
// 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
}
响应结构
发送网络请求成功后,返回的响应结构如下:
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {},
// 'request'
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
配置默认值
配置网络请求时,你可以指定将被用在各个请求的配置默认值
全局的 axios 默认值
axios.defaults.baseURL = 'https://api.example.com'; // 配置默认的baseURL
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 配置默认请求头中的Authorization
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 配置默认的post请求方式
自定义实例默认值
// 创建实例时配置默认值
const instance = axios.create({
baseURL: 'https://api.example.com'
});
// 创建实例后更改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
拦截器
在请求或响应被 then
或 catch
处理前拦截它们。
// 2.1.请求拦截器
instance.interceptors.request.use(
(config) => {
console.log(config);
// 1.比如config中的一些信息不符合服务器的要求
// 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
// 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
return config;
},
(error) => {
console.log(error);
}
);
// 2.2.响应拦截
instance.interceptors.response.use(
(res) => {
return res.data;
},
(error) => {
console.log(error);
}
);
项目中axios完整的封装
在真实项目开发中,我们会在src
文件夹中创建一个utils
文件夹,然后在文件夹中创建一个request.js
文件,写入如下代码:
import axios from "axios";
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: "http://xxx.xxx.xx.xx:8000",
timeout: 5000,
});
// 2.1.请求拦截器
instance.interceptors.request.use(
(config) => {
console.log(config);
// 1.比如config中的一些信息不符合服务器的要求
// 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
// 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
return config;
},
(error) => {
console.log(error);
}
);
// 2.2.响应拦截
instance.interceptors.response.use(
(res) => {
return res.data;
},
(error) => {
console.log(error);
}
);
// 3.发送真正的网络请求
return instance(config);
}
最后我们在main.js
中给网络请求配置下全局属性即可
import { request } from "@/utils/request";
Vue.prototype.$request = request;
这样以后,我们在任何目录下,都可以直接使用request
网络请求,不需要每次都导入了
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164832.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...