Axios(IE8+)

基于promise的http库
可用于浏览器与node.js

1.特性

  1. 支持promise API
  2. 拦截请求和相应
  3. 转换请求数据和响应数据
  4. 取消请求
  5. 自动转换JSON数据
  6. 客户端支持防御XSRF攻击

2.axios请求方法:get,post,put, patch, delete

1get: 获取数据
2post(新建): 提交数据(表单,文件)
3put(更新): 更新数据(所有数据推送到后端)
4patch(耗性能): 更新数据(只将修改的数据推送到后端)
5delet: 删除数据

3.返回304(重定向)

表示重复的请求,直接返回304,加快请求速度

4.post(Content-Type)

11.form-data 表单提交(文件上传)
22.application/json 常用数据提交
3
4//form-data请求举例
5let formData = new FormData()
6for(let key in data){
7    formData.append(key,data[key])
8}

5.并发请求(同时进行多个请求,并统一处理返回值)

1//axios.all() 用于多个请求并发
2//axios.spread() 用于处理返回值
3
4axios.all(
5    [
6        axios.get('/data.json1'),
7        axios.get('/data.json2')
8    ]
9).then(
10    axios.spread((json1,json2)=>{
11        console.log(json1,json2)
12    })
13)

6.axios实例化

当每请求的设置不尽相同时,可以通过配置实例发起不同设置的请求

1let instance = axios.create({
2    baseURL: 'http://localhost:8080',
3    timeout: 1000,
4})
5instance.get('/data.json').then(res=>{
6    console.log(res)
7})

7.axios配置

  1. 全局配置

11.axios.defaults.timeout = 2000
22.axios.defaults.baseURL = ''

  1. 实例配置

1let instance = axios.create({
2    //配置
3    baseURL: 'http://localhost:8080',//请求的域名,基本地址
4    timeout: 1000,//超时取消请求时长(ms),一般后台会有定义
5    url: '/data.json',//请求路径
6    method: 'get',//get,post,put, patch, delete(请求方法)
7    headers: {//设置请求头
8        token: '',//身份信息
9    },
10    params: {},//请求参数拼接在url(get)
11    data: {},//请求参数放在请求体(post)
12})
13instance.defaults.timeout = 3000

  1. 请求配置

1instance.get('/data.js',{
2    timeout: 5000
3})

  1. 优先级

请求配置>实例配置>实例配置

8.拦截器

在请求或响应被处理前拦截他们

  1. 请求拦截器

1axios.interceptors.request.use(
2    config => {
3        //发送请求前
4        return config
5    },
6    err => {//错误处理
7        //请求错误的时候 404 not find,401超时等
8        return Promise.reject(err)
9    }
10)

  1. 响应拦截器

1axios.interceptors.response.use(
2    res => {
3        //请求成功
4        return res
5    },
6    err => {//错误处理
7        //响应错误的时候 500服务器错误等
8        return Promise.reject(err)
9    }
10)

  1. 取消拦截器

1axios.interceptors.request.eject(interceptors)

9.取消请求

1let source = axios.CancelToken.source() //创建实例
2axios.get('/data.js',{//开始请求
3    cancelToken: source.token//配置项
4}).then(res => {
5    console.log(res)
6}).catch(err => {
7    console.log(err)
8})
9
10source.cancel('请求取消了')//调用方法取消请求

10.统一封装(async await 方法)

api.js接口信息

1//api.js接口信息
2const api = {
3    api1: {
4        method: 'get',
5        url: '/data1.js
6    },
7    api2: {
8        method: 'post',
9        url: '/data2.js
10    }
11}
12export default api

http.js请求对象

1import axios from 'axios'
2import Api from 'api.js'
3
4let instance = axios.creat({
5    baseURL: 'http://localhost:8080',
6    timeout: 1000
7})
8const Http = {}//包裹请求方法的容器
9
10for(let key in Api){
11    let api = Api[key]
12    Http[key] = async function(
13        params,//请求参数
14        isFormData=false,//是否是form-data请求
15        config={}//配置参数
16    ){  
17        let newParams = {}
18
19        //判断content-type是不是form-data类型
20        if(params && isFormData){
21            newParams = new FormData()
22            for(let i in params){
23                newParams.append(i,params[i])
24            }
25        }else newParams = params
26
27        //不同请求的判断
28        let res = {}
29        if(api.method === 'put' || api.method === 'post' || api.method === 'patch'){
30            try{
31                res = await instance[api.method](api.url,newParams,config)
32            }catch(err){
33                res = err
34            }
35        }else if(api.method === 'delete' || api.method === 'get'){
36            config.params = newParams
37            try{
38                res = await instance[api.method](api.url,config)
39            }catch(err){
40                res = err
41            }
42        }
43        return res //返回响应值
44    }
45}
46//请求拦截器
47instance.interceptors.request.use(
48    config => {
49        //发起请求前
50        Toast.loading()
51        return config
52    },
53    err => {
54        //请求错误
55        Toast.clear()
56        return err
57    }
58)
59//响应拦截器
60instance.interceptors.response.use(
61    res => {
62        //响应前
63        Toast.clear()
64        return res.data
65    },
66    err => {
67        //响应错误
68        Toast.clear()
69        return err
70    }
71)
72
73export default Http

调用方法

1import Http from 'http.js'
2Vue.prototype.$Http = Http
3
4async function(){
5    let res = await this.$Http.api1({id: 4})
6}
7
8async function(){
9    let res = await this.$Http.api2(info,true,config)
10}



Axios及其async await封装的更多相关文章

  1. 使用 async await 封装微信小程序HTTP请求

    1. 编写将普通回调函数形式的方法转换为promise方法的promisic方法 // util.js const promisic = function (func) { return functi ...

  2. 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用

    github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...

  3. 使用async await 封装 axios

    异步变同步: 厉害-- https://www.jianshu.com/p/4168efdc172b

  4. vue 中使用 async/await 将 axios 异步请求同步化处理

    1. axios 常规用法: export default { name: 'Historys', data() { return { totalData: 0, tableData: [] } }, ...

  5. Vue实例中封装api接口的思路 在页面中用async,await调用方法请求

    一般我们写小型的项目是用不到封装axios实例 但是当我们写大型项目时  接口有时候多到有上百个接口,那我们在请求一次调用一次接口,接口上好多都是重复的,这个时候我们就可以封装axios实例,既节省了 ...

  6. 在react+redux+axios项目中使用async/await

    Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...

  7. 在axios中使用async await

    最近在做树鱼的项目, 联想到 如果用 async await 怎么处理, export async function Test1() { return new Promise((resolve) =& ...

  8. vue项目中对axios的二次封装

    近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...

  9. async/await,了解一下?

    上一篇博客我们在现实使用和面试角度讲解了Promise(原文可参考<面向面试题和实际使用谈promise>),但是Promise 的方式虽然解决了 callback hell,但是这种方式 ...

随机推荐

  1. 【机器学习基础】无监督学习(2)——降维之LLE和TSNE

    在上一节介绍了一种最常见的降维方法PCA,本节介绍另一种降维方法LLE,本来打算对于其他降维算法一并进行一个简介,不过既然看到这里了,就对这些算法做一个相对详细的学习吧. 0.流形学习简介 在前面PC ...

  2. 关于API和SDK的个人理解及两者区别

    关于API和SDK的个人理解及两者区别 最近接到公司的一项任务,调用第三方库的一些东西.因此记录一下在使用第三方的功能模块时常常提及到的两个名词--API和SDK. 1.SDK是什么?SDK:概念:软 ...

  3. xssgame记录

    xss地址:http://www.xssgame.com/ 直接插入标签 构造语句,注意闭合 注意寻找输出点,这个会进行一次urlencode,和浏览器有关系,firefox过不了 javascrip ...

  4. HashMap集合类 5种最佳遍历方式

    1. 使用 Iterator 遍历 HashMap EntrySet 2. 使用 Iterator 遍历 HashMap KeySet 3. 使用 For-each 循环迭代 HashMap 4. 使 ...

  5. 在线Remix链接本地文件夹

    问题 1.本地Remix环境版本滞后于在线编译器,新版本的语法在旧版本编译器中出现错误. 2.没有配置Vscode编译器,不便导入项目. 解决方案 *本解决方案基于Mac系统 创建共享文件夹 在本地创 ...

  6. [AT2306]Rearranging(拓扑序)

    [AT2306]Rearranging(拓扑序) 只有luogu 题面(luogu): 有一个$n$个数组成的序列$a_{i}$. 高桥君会把整个序列任意排列,然后青木君可以选择两个相邻的互质的数交换 ...

  7. 详细描述一下 Elasticsearch 索引文档的过程 ?

    面试官:想了解 ES 的底层原理,不再只关注业务层面了. 解答: 这里的索引文档应该理解为文档写入 ES,创建索引的过程. 文档写入包含:单文档写入和批量 bulk 写入,这里只解释一下:单文档写入流 ...

  8. pyinstaller打包Django项目

    系统:ubuntu18.04 / Centos 7自带Python3.61.安装pip3     apt-get install -y python3-pip     pip3 install --u ...

  9. 手撕代码之线程:thread类简单使用

    转载于:https://blog.csdn.net/qq_22494029/article/details/79273127 简单多线程例子: detch()启动线程: 1 #include < ...

  10. 面试问题之计算机网络:TCP三次握手四次挥手

    转载于:https://www.cnblogs.com/Andya/p/7272462.html TCP三次握手: 起初A和B都处于CLOSED关闭状态 B创建TCB,处于LISTEN收听状态,等待A ...