likes
comments
collection
share

vue3中axios的基本使用和请求封装

作者站长头像
站长
· 阅读数 43

🌸网络请求库

在前端开发中，网络请求是必不可少的一环。目前比较常用的网络请求库有三种，分别是XMLHttpRequest、fetch和axios。

  1. XMLHttpRequest

XMLHttpRequest是最早被引入的浏览器内置网络请求库，支持发送各种请求，包括get请求、post请求等。

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

尽管XMLHttpRequest的兼容性非常好，但是使用起来比较繁琐，而且不支持Promise API等现代特性。

  1. fetch

fetch是ES6引入的网络请求库，支持Promise API，使用方法也比较简单：

fetch('/api')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

fetch的优点在于支持Promise API，使用起来比较简单方便。但是它不支持拦截请求和响应，也不能转换请求和响应数据，因此在一些特殊情况下可能无法满足需求。

  1. axios

基于promise可以用于浏览器和node.js的网络请求库

🌸axios

🌸axios介绍

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。

🌸axios特性

  • 发送XMLHttpREquests请求
  • 在node.js中发送请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF

🌸axios安装

本篇介绍axios的使用是与vue项目结合起来的，首先在命令行中输入npm create vue创建vue项目。其次，axios是一个第三方Ajax库，需要单独安装和引入，在命令行中输入npm install axios 安装axios的依赖包。接着，在需要使用的地方引入axios对象import axios from axios，在实际开发中，通常会单独建立一个js文件引入axios引入再进行封装.

🌸axios发送请求

可以向 axios 传递相关配置来创建请求，为了方便起见，已经为所有支持的请求方法提供了别名。

  • 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]])

注意：在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

  1. 发送request请求

    接收一个对象，在对象中使用键值对方式配置信息。

  2. 发送get请求

限定method为get请求，网络请求中get请求是将参数拼接搭配url上发送的请求，在axios请求中则可以使用params属性配置将传递的参数拼接到url上。params属性是一个对象，其传递的参数使用键值对形式书写

  1. 发送post请求

    限定method为post请求，网络请求中post请求是将参数放在请求体中发送的请求，在axios请求中可以使用 data属性来配置传递的参数。data属性同样是一个对象，其传递的参数使用键值对形式书写。

    需要注意的是，在发送post请求时，如果需要设置请求头信息，可以使用headers属性进行设置。同时还可 以设置其他一些相关的请求参数，比如超时时间、响应类型等等。

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
// 1.发送request请求
axios.request({
    url: "http://123.207.32.32:8000/home/multidata",
    method:"get"
}).then(res => {
    console.log("request的res:",res.data);
})
// 2.发送get请求
axios.get("http://123.207.32.32:8000/home/multidata", {
    // params: {
    //     id:500665346
    // }
}).then(res => {
    console.log("get请求的res:", res.data);
})
// 3.发送post请求
axios.post("http://123.207.32.32:1888/02_param/postjson", {
    name: "xiaoran",
    password: 123456
}).then(res => {
    console.log("post请求的res:", res.data);
})
createApp(App).mount('#app')

🌸配置baseurl和使用axios.all

🌸baseurl

如果我们在多个地方都需要使用同样的URL前缀，那么可使用axios.defaults.baseURL属性来设置baseURL： axios.defaults.baseURL=baseURL

🌸axios.all

axios.all 是Axios内置的一个辅助方法，用于处理并发的请求,它本质上就是promise.all()。

axios.all()接收一个Array数组作为参数，每个参数成员就是要发送的axios请求体，axios.all()函数返回一个promise实例，通过.then方法接收响应的数据，并且响应的数据也包裹在一个Array数组中， 每个数组成员对应响应的请求结果。

const baseURL = "http://123.207.32.32:8000"
axios.defaults.baseURL = baseURL
axios.all([
    axios.get("/home/multidata", {

    }).then(res => {
        console.log("get中的res", res.data);
    }),
    axios.post("http://123.207.32.32:1888/02_param/postjson", {
        name: "ran",
        password: 123
    }).then(res => {
        console.log("post中的res", res.data);
    })
])

🌸创建实例

有时候我们需要针对不同的请求设置不同的配置，此时可以使用axios.create()方法创建一个axios实例。axios.create()接收一个对象参数，使用键值对传入默认的配置，返回axios实例。

const instance1 = axios.create({
    timeout: 1000,
    baseURL: "http://123.207.32.32:8000",
    headers: {}
})
instance1.get("/home/multidata", {
    // params: {
    //     id:1100
    // }
}).then(res => {
    console.log("instance1实例中的res", res.data);
})

🌸拦截器

axios的拦截器功能非常强大，可以在发送请求或者接收响应的过程中对其进行拦截、修改、转化等操作。

方法： axios.interceptor.request.use()请求拦截器 axios.interceptor.response.use()响应拦截器

两个拦截器使用方法一致，都接收两个参数：

  • 参数1：拦截成功回调函数
  • 参数2：拦截失败回调函数。 注意，无论请求还是响应拦截，拦截完了要return 返回拦截的请求体和响应体，不然就不会执行后边的请求和响应结果操作了。
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
// http://123.207.32.32:8000/home/multidata
// http://123.207.32.32:1888/02_param/postjson
// 1.请求拦截器
axios.interceptors.request.use((config) => {
    console.log("请求拦截成功");
    // 1.开始loading的动画
    // 2.对原来的一些配置进行一些修改
    // 2.1 header
    // 2.2 认证登录:token/cookie
    // 2.3 请求参数进行某些转化
    return config
}, (err) => {
    console.log("请求拦截失败", err);
})
// 2.响应拦截器
axios.interceptors.response.use((res) => {
    console.log("响应拦截成功");
    // 1.停止loading动画
    // 2.对数据进行转化，在返回数据
    return res.data
}, (err) => {
    console.log("响应拦截失败", err);
})
axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
    console.log("get中的res", res);
}).catch(err => {
    console.log("捕获异常", err);
})
createApp(App).mount('#app')

🌸axios封装

在项目中，我们通常会对请求进行二次封装，在项目中src/utils文件下新建request.js文件存放封装的请求，导入第三方请求库。那么为什么会二次封装请求呢？因为例如axios请求属于第三方库，如果后期作者不再维护axios库的时候，我们只需要修改request.js文件依赖的第三方框架部分，这样不会影响项目中其他需要发送请求的代码。

我们可以对axios进行二次封装，以满足各种不同的业务需求，例如添加token、统一处理错误信息等等。

import axios from "axios"
//axios的封装
class HYRequest {
    //默认配置baseURL等
    constructor(baseURL, timeout = 1000) {
        this.instance = axios.create({
            baseURL,
            timeout
        })
    }
    request(config) {
        //request请求 返回promise对象
        return new Promise((resolve, reject) => {
            this.instance.request(config).then(res => {
                resolve(res.data)
            }).catch(err => {
                console.log("request中的err", err);
                reject(err)
            })
        })
    }
    get(config) {
        return this.request({ ...config, method: "get" })
    }
    post(config) {
        return this.request({ ...config, method: "post" })
    }
}
// const HYRequest1 = new HYRequest("http://123.207.32.32:8000")
// const HYRequest2 = new HYRequest("http://123.207.32.32:8001")
export default new HYRequest("http://123.207.32.32:8000")
转载自:https://juejin.cn/post/7240789855138676795
评论
请登录