【无标题】

最新推荐文章于 2024-09-17 16:06:02 发布

dreamerqin

最新推荐文章于 2024-09-17 16:06:02 发布

阅读量44

点赞数 1

文章标签：前端 javascript ajax

本文链接：https://blog.csdn.net/dreamerqin/article/details/124839004

版权

axios

axios是什么？

前端最流行的 ajax请求库
react/vue 官方都推荐使用 axios 发ajax 请求
文档: https://github.com/axios/axios

axios特点

基于 xhr + promise 的异步 ajax请求库
浏览器端/node 端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

axios常用语法

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定url 发get 请求
axios.request(config): 等同于axios(config)
axios.get(url[, config]): 发get 请求
axios.delete(url[, config]): 发delete 请求
axios.post(url[, data, config]): 发post 请求
axios.put(url[, data, config]): 发put 请求

axios.defaults.xxx: 请求的默认全局配置（method\baseURL\params\timeout…）
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器

axios.create([config]): 创建一个新的axios(它没有下面的功能)

axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

Ajax、axios、fetch的区别

网络请求	特点
Ajax	一种技术统称，主要利用XHR实现网络请求
Fetch	具体API,基于promise,实现网络请求
Axios	一个封装库，基于XHR封装，较为推荐使用

自己创建一个API

API 的分类
REST API: restful （Representational State Transfer (资源)表现层状态转化）
(1) 发送请求进行CRUD 哪个操作由请求方式来决定
(2) 同一个请求路径可以进行多个操作
(3) 请求方式会用到GET/POST/PUT/DELETE
非REST API: restless
(1) 请求方式不决定请求的CRUD 操作
(2) 一个请求路径只对应一个操作
(3) 一般只有GET/POST

axiosAPI

可以通过向 axios 传递相关配置来创建请求

axios(config)

1、get请求

axios({
     //请求类型
     methods: 'GET',
     //请求url
     url: '',
     //设置请求体
     data:{
     }
   })

get请求的作用：获取数据

2、post请求

axios({
     //请求类型
     methods: 'POST',
     //请求url
     url: '',
     //设置请求体
     data:{
     }
   })

post请求的作用：发送数据

3、put请求

axios({
     //请求类型
     methods: 'PUT',
     //请求url
     url: '',
     //设置请求体
     data:{
     }
   })

put请求的作用：更新数据

4、delete请求

axios({
     //请求类型
     methods: 'delete',
     //请求url
     url: '',
   })

delete请求的作用：删除请求

这个可以跨域请求是因为json-server存在跨域资源共享CORS(Cross-Origin Resource Sharing)

CORS是一个新的W3C标准，它新增的一组HTTP首部字段允许服务器其声明哪些来源请求有权限访问哪些资源，换言之它允许浏览器向其声明了CORS的站进行跨域请求。

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

创建实例

可以使用自定义配置新建一个 axios 实例

axios.create([config])

根据指定配置创建一个新的 axios, 也就是每个新 axios 都有自己的配置
新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
为什么要设计这个语法?
(1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理（比如有多个baseURL需要指定）
(2) 解决: 创建2 个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

const instance = axios.create({ // instance是函数类型
	baseURL: 'http://localhost:3000'
})
// 使用instance发Ajax请求
instance({
	url: '/posts'
})
instance.get('/posts')

拦截器函数

说明: 调用axios()并不是立即发送ajax 请求, 而是需要经历一个较长的流程
流程: 请求拦截器2 => 请求拦截器1 => 发ajax 请求 => 响应拦截器1 => 响应拦截器2 => 请求的回调
注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是config, 响应拦截器传递的是response

// 添加两个请求拦截器(回调函数)
axios.interceptors.request.use(
  config => {
    console.log('request interceptor1 onResolved()') // -----------2
    return config
  },
  error => {
    console.log('request interceptor1 onRejected()')
    return Promise.reject(error)
  }
)

axios.interceptors.request.use(
  config => {
    console.log('request interceptor2 onResolved()') // -----------1
    return config
  },
  error => {
    console.log('request interceptor2 onRejected()')
    return Promise.reject(error)
  }
)

// 添加两个响应拦截器
axios.interceptors.response.use(
  resopnse => {
    console.log('response interceptor1 onResolved()') // -----------3
    return resopnse
  },
  error => {
    console.log('response interceptor1 onRejected()')
    return Promise.reject(error)
  }
)

axios.interceptors.response.use(
  resopnse => {
    console.log('response interceptor2 onResolved()') // -----------4
    return resopnse
  },
  error => {
    console.log('response interceptor2 onRejected()')
    return Promise.reject(error)
  }
)

axios.get('http://localhost:3000/posts')
  .then(response => {
    console.log('data', response.data) //data Array(4) -------------5
  })
  .catch(error => {
    cosole.log('error', error.message)
  })

// request interceptor2 onResolved()
// request interceptor1 onResolved()
// response interceptor1 onResolved()
// response interceptor2 onResolved()
// data Array(4)