axios-【与ajax区别+vue中使用】

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一.axios与ajax区别

相同点：都是执行异步请求操作

不同点：

  • 大小

    • axios体积小 只需在要使用的目录下 npm install axios --save

    • ajax 需要导入jQuery【体积较大 只是为了ajax去引入是不值得的】

  • 针对方向

    • axios 符合前端MVVM的浪潮

    • ajax 本身是针对MVC的编程

  • 实现方法与返回值

    • axios 用promise技术实现对ajax技术的封装  返回值是 promise

    • ajax   基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案

  • 对并发请求的封装api

二.axios应用

　　1. 安装axios 打开需要使用的路径下的命令行

npm install axios --save

　　2. 在需要使用 axios 的地方导入

import axios from \'axios\'

　　3. axios实例使用

  • 创建实例

    • axios可直接使用 axios(config)　　但还是推荐创建实例，因为可以对实例进行单独配置,下方讲解

 1 axios({
 2    url:\'服务器url\',
 3    method:\'请求方式\' ,
 4    params:{
 5      name:\'cc\',
 6      age:\'18\'      
 7    } 
 8 }).then(res=>{
 9    console.log(res) 
10 })

    • axios.all([ ]) 一次执行多个请求【并发请求】

1 axios.all([axios({
2         //第一个请求参数
3     }), axios({
4         //第二个请求参数
5 })])
6  .then(results => {
7     //返回值数组 分别是一与二请求的结果
8     console.log(results)
9  })

    • 设置默认配置【默认属性 可在使用时省略 类似父类】

1 axios.defaults.baseURL = \'默认路径\'
2 axios.defaults.timeout = 5000

***注意：method:get 请求参数对应 params:{ name:\'cc\'}

　　　    method:post 请求参数对应 data:{ name:\'cc\'}

　　4. 创建实例-配置

  • 原因

    • 项目中要请求多个不同url获取数据 因此每个的使用baseUrl 不一定相同。

    • axios是全局的 如果直接使用修改 很可能出现问题

  • 使用

    • 调用axios.create(config)的 api实现创建实例-【其中config为上面的obj对象】

1 const instance = axios.create({
2     baseURL : \'请求路径\',
3     timeout : 5000
4 })

三、应用于vue 封装request方法

最后对其进行封装requset函数-【为了直接在其他地方直接使用】（分三步）

  • 创建实例

    • 　　放置默认配置 baseURL等

  • 增加拦截器

    • 　　可以对访问请求 与 响应拦截操作 对数据进行二次加工

  • 返回网络请求

    • 　　返回promise对象 完成封装

    • 　　在外部使用.then()继续实现下一步操作

 1 export function request(config) {
 2     //1.创建axios实例
 3     const instance = axios.create({
 4         baseURL: \'\',
 5         timeout: 5000
 6     })
 7     
 8     //2.axios拦截器
 9     //2.1请求拦截
10     instance.interceptors.request.use(config=>{
11         //拦截操作
12         return config    //必须返回回去 否则调用处取不到
13     },err=>{
14         //console.log(err)
15     })
16     //2.2响应拦截
17     instance.interceptors.response.use(res=>{
18         //拦截操作
19         return res //必须返回回去 否则调用处取不到
20     },err=>{
21         //console.log(err)
22     })
23     
24     //3发送真正的网络请求【返回promise对象】
25     return instance(config)
26 }

以上是 axios-【与ajax区别+vue中使用】 的全部内容， 来源链接： utcz.com/z/377075.html

回到顶部