从0实现一遍axios,再也不怕写请求

Souleigh ✨ 等级 769 1 2
标签:

axios请求方法

主要有get,post,put,patch,delete

  • get

    获取数据

  • post

    提交数据(表单提交+文件上传)

  • put

    更新数据(将所有数据均推放到服务端)

  • patch

    更新数据(只将修改的数据推送到后端)

  • delete

    删除数据

get方法

写法

调用型

 axios.get('/data.json').then((res)=>{
      console.log(res)
    })

axios()型

axios({
  method:'get',
  url:'/data.json'
}).then((res)=>{
     console.log(res)
})
params

如果我们需要加载 : http://localhost:8080/data.json?id=12,应该如何去获取呢?

调用型

axios.get('/data.json',{
      params:{
        id:12
      }
    }).then((res)=>{
      console.log(res)
    })

axios()方法型

axios({
  method:'get',
  url:'/data.json',
  params:{
    id:12
  }
}).then((res)=>{
     console.log(res)
})

post方法

写法

调用型

axios.post('/post',{},config)

post方法有三个参数,分别是url、数据、config。config参数暂时不讨论。

一般上传的数据分两种

  • form-data 表单提交(图片上传、文件上传)
  • application/json
  • 以上两种数据,都可以在请求发起后,进入浏览器network查看请求头中的content-type进行查看

假设我们现在要上传一个数据:

let data = { id:12 }

那么我们可以直接将其传入:

axios.post('/post',data).then((res)=>{
  console.log(res)
})

axios()方法型

axios({
  method:'post',
  url:'/post',
  data:data
}).then(...)
两种数据的小细节

当我们上传的是一个一般的let data = { id:12 }数据时,Network的请求头里会显示为:application/json;charset=UTF-8

当我们上传的是:

let data = {id:12}
let formData = new FormData()
for(let key in data){
      formData.append(key,data[key])
    }

这里将data转格式了,格式变为formdata形式。

那么Network的请求头里会显示为:multipart/form-data; boundary=----WebKitFormBoundarywWFnSlPye1ZF8CSw

put方法和patch方法

形式与post方法大体相同,Network显示仅Request Method不同。

delete方法

写法

url删除法

//直接从url里面删除
axios.delete('/data.json',{
      params:{
        id:12
      }
    }).then((res)=>{
      console.log(res)
    })

从url删除,Network请求头最后面会显示为:Query String Parameters

请求体删除法

axios.delete('/data.json',{
      data:{
        id:12
      }
    }).then((res)=>{
      console.log(res)
    })

从请求体里删除,Network请求头最后面会显示为:Request Payload

两种方法的删除方式是不同的,具体使用需要和后端沟通。

并发请求

简介

同时进行多个请求,并统一处理返回值。

案例:假设有一个聊天工具,同时有你的聊天记录和个人信息。此时需要调用两个接口去请求数据。此时需要统一处理他们的返回值。

axios提供的方法:all、spread

axios.all方法接受一个数组作为参数,数组中的每个元素都是一个请求,返回一个promise对象,当数组中所有请求均已完成时,执行then方法。 在then方法中执行了 axios.spread 方法。该方法是接收一个函数作为参数,返回一个新的函数。接收的参数函数的参数是axios.all方法中每个请求返回的响应。

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 两个请求都完成后,acct是getUserAccount的返回值,同理,perms是 getUserPermissions的返回值
  }));

axios实例简介

为什么要用实例?

当我们需要用到不同的后端域名,直接调用axios.get并不太方便。我们可以用创建实例的方式去调用,不同的域名用不同的实例一一对应。

表现形式

 created() {
     let instance = axios.create({
       baseURL:'http://localhost:8080',//基本请求路径
       timeout:1000,//超时设定
     })
     instance.get('/data.json').then(res=>{
        console.log(res)
     })
   }

基本配置方法

       baseURL:'http://localhost:8080',//请求的域名、基本地址
       timeout:1000,//请求超时时长(ms)
       url:'/data.json',//请求路径
       method:'get,post,put,patch,delete',//请求方法
       headers:{
         token:''//代表当前登陆人的身份信息
       },//设置请求头
       params:{},//将请求参数拼接在url上,是一个对象
       data:{}//将请求参数放在请求体里,是一个对象

其中,params和data表现形式为对象。

使用场景通常是发起请求时,顺带传送参数:

 //以get请求为例,get有两个配置,分别是相对路径和config
 axios.get('/data.json',{
  params:{
     //参数
  }
 })

参数配置方法

1.全局配置

 axios.defaults.基本配置方法(baseurl等)
 如:
 axios.defaults.timeout = 1000 //全局配置请求时长1s

2.实例配置

 let instance = axios.create(
   //基本配置方法
 )

如果设置了全局的配置方法,而实例配置中没有设置相应的方法,则延用全局的方法,否则,以实例中的方法为主。

3.axios请求配置

视具体情况而定,如调用某个路径的文件巨大,我们可以单独对其请求时长进行设置:

 instance.get('/data.json',{
   timeout:5000
 })

总结

优先级:请求配置 > 实例配置 > 全局配置

拦截器

在发起请求前做一些处理,再发起请求后再做一些处理。

分为请求拦截器和响应拦截器

请求拦截器

 axios.interceptors.request.use(
   config=>{
     //在发送请求前做些什么
     return config
   },
   err=>{
     // 在请求错误的时候做些什么(此处错误,请求没有到后端)
     return Promise.reject(err)//这里返回一个promise对象
   }
 )

响应拦截器

 axios.interceptors.responce.use(
   res=>{
      //请求成功对响应数据进行处理
      return res
   },err=>{
      //响应错误做些什么(此处错误,到达后端后返回)
      return Promise.reject(err)
   }
 )

两者都在响应错误后进行了promise对象的返回,具体的作用是什么呢?

 axios.get().then().catch(err=>{})

这一段代码是我们平时发送get请求时的标准形态,then会执行请求成功后的操作,catch用来捕获错误。

我们前面拦截响应后,无论是请求还是响应的拦截器,他们的err返回的promise都会进入catch中。

取消拦截器(了解即可)

 let inerceptors = axios.interceptors.request.use
 (config=>{
      config.header = {
          auth:true
      }
      return config
 })
 axios.inerceptors.request.eject(interceptors) //用axios全局去调用interceptors,这样就取消拦截了。。。

举个栗子

通过拦截器控制登陆状态

 // 登陆状态,有token
 let request = axios.create({})
 request.interceptors.request.use
 (config => {
    config.headers.token = ''
    return config
 })
 // 非登陆状态,无token 
 let request2 = axios.create({})

有token的可以访问更多,get更多的数据,无token则不行。类似于评论需要登陆

错误处理

表现形式

 //首先设置拦截器
 axios.interceptors.request.use(
  config =>{
    return config
  },err =>{
    return Promise.reject(err)
  }
 )
 axios.interceptors.response.use(
  res =>{
    return res
  },err =>{
    return Promise.reject(err)
  }
 )
 ​
 //错误的获取
 axios.get('/data.json').then(res=>{
   console.log(res)
 }).catch(err =>{
   console.log(err) //所有错误处理都会进入此处
 })

具体的实践过程中,我们需要创建一个统一的错误处理,将所有的错误类型都放在拦截其中,方便我们后面调用接口时使用。

栗子

 //创建一个请求实例
 let instance = axios.create({})
 //为请求实例添加请求拦截器
 instance.interceptors.request.use(
  config =>{
    return config
  },err =>{
  //请求错误 一般http状态码以4开头,常见:401超时,404 not found 多为前端浏览器错误
     return Promise.reject(err)
  }
 )
 instance.interceptors.response.use(
   res=>{
     return res
   },err =>{
     //响应错误,一般http状态码以5开头,500系统错误,502系统重启等,偏向于服务端返回的报错
     return Promise.reject(err)
   }
 )
 ​
 //使用
 instance.get('data').then(res=>{
    console.log(res)
 }).catch(err =>{
     console.log(err)
 })

取消请求

用于取消正在进行的http请求,比较少用到,就不做介绍了

收藏
评论区

相关推荐

React Hook实战项目(含axios封装,双层路由的使用,redux的使用)
好久没写文章了,今天就来介绍下最近写的react hook的练手项目,用到相关的技术有以下: antd,reactrouterdom,reduxthunk,axios,hook,下面就开始介绍自己的项目了。项目比较简单,只是把架子搭好了,后面会继续完善。这是我的项目地址 https://github.com/Hongguobin/createa
记录Vue项目实现axios请求头带上token
在vue项目中首先 npm 命令安装 axios: npm install axios Saxios 的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化 vuexpersistedstate 插件保存数据npm i S vuexpersistedstateimport persistedStat
0基础,从Docker到Kubernetes线上直播班
起源Google的Kubernetes 在过去几年中一直是云计算领域最著名的开源项目之一,项目成立4年一路高歌猛进,早已家喻户晓,成为容器编排的事实标准,为组织设计和部署应用程序带来全新定义。Linux 基金会常务董事 Jim Zemlin 说:“Kubernetes is the Linux of the Cloud(Kubernetes 已经成为云计算时
CSRF 令牌 & JavaScript
当构建由 JavaScript 驱动的应用时,可以方便地让 JavaScript HTTP 函数库发起每一个请求时自动附上 CSRF 令牌。默认情况下, `resources/js/bootstrap.js` 文件会用 Axios HTTP 函数库注册的 `csrf-token` meta 标签中的值。如果你不使用这个函数库,你需要手动为你的应用配置此行为。
CanOpen学习笔记3
主机部分(Master): 从机PDO发送发送或者接收需要SYNC信号,也就是从机接收到一个或者多个SYNC信号后发送一个PDO,也可以主机明确给出请求信号。 SYNC同步信号产生设置: 1、写0x40000080到index 0x1005, subindex 0位置(SYNC COB ID)。 2、设置同步信号周期,在index 0x1006, s
CentOS7从0学起
0、CentOS官网下载DVD镜像,在virtualbox上安装,一路可视化,下一步。 1、安装完成时,使用ip addr 查看网络信息,发现网卡是down状态,使用命令:ifup enp0s3(enp0s3是我的网卡),再使用ip addr 确认,虚拟机网路默认是:网络地址转换(NAT),需要改为桥接网卡,以便使用ssh等远程工具。我这里使用默认的DHC
Kubernetes 从0到1
Kubernetes,又称为 k8s(_首字母为 k、首字母与尾字母之间有 8 个字符、尾字母为 s_,所以简称 k8s)或者简称为 “kube” ,是一种可自动实施 Linux 容器操作的开源平台。它可以帮助用户省去应用容器化过程的许多手动部署和扩展操作。也就是说,您可以将运行 Linux 容器的多组主机聚集在一起,由 Kubernetes 帮助您轻松高效
React中利用axios来实现数据请求
axios是基于Promise来封装的,通常我们会用axios在数据请求这块作如下配置: **一、拦截器** ![](https://oscimg.oschina.net/oscnet/211e5ccb358ad510f5399d98163fe5be900.png) 有注释,不难理解,通常请求头参数不是写死的,应该是去浏览器中读的,例如,login之后
SwiftUI 实战:从 0 到 1 研发一个 App
心得感悟 ---- 起初看到 WWDC 上的演示 SwiftUI 时,我就觉得 SwiftUI 有种陌生的熟悉感(声明式语法),所以体验下,看看有没有什么启发。 先说下整体项目完成下来的感受: * 用 Swift + SwiftUI 开发 iOS 项目效率很高,本人之前没有接触过 Swift 语言,这次是从 0 开始学 swift 语言以及 swi
TP5+layui表格使用(更新中)
<table class="layui-hide" id="category"></table> <script type="text/javascript" src="__PLUGINS__/axios/axios.min.js"></script> <script type="text/javascr
vue Axios 向后端提交参数 请求头 json 方式(Content
import axios from 'axios' export default { name: 'basetable', data() { return { tableData: [],
vue axios get请求参数为json对象 而非字符串形式
**axios get请求方式 传递给后台的参数都是字符串下形式,无法传递json对象 或数组对象等** ---------------------------------------------------- **post请求方式则可以实现,** ------------------- **但若后台接口要求必须用get方式传递对象给后台,需要装插件
vue 根据接口返回的状态码判断用户登录状态并跳转登录页,登录后回到上一个页面(http拦截器)
背景:后台接口返回code==501表示用户是未登录状态,需要登录才可访问; 通过http拦截做路由跳转  第一步:src目录下新建http.js文件,内容如下: import Axios from 'axios' import { Loading, Message, MessageBox } from 'element-ui'
前端的路由封装
在一个项目当中,我们常常需要调用很多接口,我们不可能每次调用接口都完整地写一遍调用,因此我们需要对其进行封装 /axios.js/// 封装axiosimport axios from "axios";import qs from "qs";// 初始化axios,设置默认的baseURLconst http axios.create( baseUR
从0实现一遍axios,再也不怕写请求
axios请求方法主要有get,post,put,patch,delete get 获取数据 post 提交数据(表单提交+文件上传) put 更新数据(将所有数据均推放到服务端) patch 更新数据(只将修改的数据推送到后端) delete