vue(24)网络请求模块axios使用
什么是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
网络请求,不需要每次都导入了
vue(24)网络请求模块axios使用的更多相关文章
- Python 网络请求模块 urllib 、requests
Python 给人的印象是抓取网页非常方便,提供这种生产力的,主要依靠的就是 urllib.requests这两个模块. urlib 介绍 urllib.request 提供了一个 urlopen 函 ...
- vue vue-resource网络请求
在使用get/post 网络请求,需要下载插件 "vue-resource" npm install vue-resource -s 在路由要导入及注册 import Vue fr ...
- aiohttp 支持异步的网络请求模块
通常在进行网络数据采集时候我们会用到requests,urllib等模块,但是这些模块在使用中并不支持异步,所以今天我们介绍一个支持异步网络请求的模块aiohttp. 首先我们使用flask简单的搭一 ...
- iOS开发简记(7):网络请求模块
主流的APP都少不了跟服务器交互,网络请求是少不了的事情. 开源的网络请求库,有很多,比如:AFNetworking.YTKNetwork.PPNetworkHelper.ASIHttpRequest ...
- vue 如何发起网络请求 之 axios
1 1 2 3 4 5 6 7 8 9 10 // axios 请求 在main.js里边写入 import Axios from 'axios' // 配置请求信息 var $http = ...
- 四、Vue CLI-异步请求(axios)
一.模块的安装 npm install axios --save #--save可以不用写 如图: 二.配置main.js import axios from 'axios' Vue.prototyp ...
- vue的ajax请求之axios
axios.get(this.apiUrl+'good/info',{params:{'goodsid':'sp441153'}}) .then(function(response){ console ...
- axios网络封装模块
功能特点 在浏览器中发送XMLHttpRequests请求 在node.js总发送http请求 支持Promise API 拦截请求和相应 转换请求和响应数据 axios请求方式 支持多种请求方式 a ...
- 使用axios优雅的发起网络请求
原文链接:https://www.jianshu.com/p/73585303fdc0 公司项目使用了vue作为技术栈,便理所应当地使用了官方推荐的axios进行网络请求,这里记录下axios的封装方 ...
随机推荐
- python+selenium基础篇,三种等待方式,显示、隐式、强制等待
1.显示等待: from selenium import webdriver from time import sleep from selenium.webdriver.support.ui imp ...
- VisualStudio自动添加注释
1.VisualStudio 新开页自动添加注释 a 在团队开发或者公司开发中,我们一般都喜欢给自己所创建的类或者接口以及其它模板设置版权说明,但是每个类一个一个的去加又是非常的费劲,所以一般情况下 ...
- 【dp】状压dp
二进制的力量 状态压缩DP 愤怒的小鸟 第一次接触状态压缩DP是在NOIP2016的愤怒的小鸟,当时菜得连题目都没看懂,不过现在回过头来看还是挺简单的,那么我们再来看看这道题吧. 题意&数据范 ...
- Pytest学习笔记3-fixture
前言 个人认为,fixture是pytest最精髓的地方,也是学习pytest必会的知识点. fixture用途 用于执行测试前后的初始化操作,比如打开浏览器.准备测试数据.清除之前的测试数据等等 用 ...
- 关于kubernetes的十七个实验(一)
实验综述 Kubernetes用来管理云平台上的容器化应用,这里从 https://www.katacoda.com/courses/kubernetes 学习Kubernetes的使用,对Kuber ...
- Linux中测试网络命令
ping IP -t 是持续性查看网络状态
- SpringBoot_登录注册
学习SpringBoot需要的前期基础 Spring(Bean容器 IOC set 构造方法 AOP) SpringMVC(GET POST Restful) 对于SpringBoot,约定大于配置 ...
- ES6中的Module与Interator
小编今天在用Vue做项目的时候,发现组件中有import和export,刚好今天看到相关的语法介绍和一些实例,下面小编就和大家一起进步.对于模块化规范,在es6出现之前,有以下三种规范,分别是Comm ...
- PL/SQL插入数据报错:Access violation at address 00413A81 in module 'plsqldev.exe'. Read of address 00000000
前言 今天同事在使用plsql给oracl数据库插入记录时报错:Access violation at address 00413A81 in module 'plsqldev.exe'. Read ...
- Redmine部署中遇到的问题
Redmine部署文章: 第一篇:Redmine部署 第二篇:Redmine部署中遇到的问题 上一篇文章我写了Redmine怎样部署(点这里直达上一篇文章),这一篇就写一下在Redmine部署中遇到过 ...