分类: Vue.js

Vue3使用axios的教程

[ 2022-05-10 15:58:46 | 作者: admin ]
字号: 大 | 中 | 小

axios中文网站：axios-http.com/zh/

一、安装axios

1
npm install axios --save


二、配置axios，添加拦截器

在src目录下新建一个request文件夹，在里面新建index.ts（或者.js）文件，编辑代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import axios from 'axios'// 创建一个 axios 实例const service = axios.create({
    baseURL: '/api', // 所有的请求地址前缀部分
    timeout: 60000, // 请求超时时间毫秒
    withCredentials: true, // 异步请求携带cookie
    headers: {
        // 设置后端需要的传参类型
        'Content-Type': 'application/json',
        'token': 'your token',
        'X-Requested-With': 'XMLHttpRequest',
    },})// 添加请求拦截器service.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        return config  },
    function (error) {
        // 对请求错误做些什么
        console.log(error)
        return Promise.reject(error)
    })// 添加响应拦截器service.interceptors.response.use(
    function (response) {
        console.log(response)
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        // dataAxios 是 axios 返回数据中的 data
        const dataAxios = response.data      // 这个状态码是和后端约定的
        const code = dataAxios.reset     return dataAxios   },
    function (error) {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        console.log(error)
        return Promise.reject(error)
    })export default service

三、使用axios发送请求

在src目录下新建一个apis文件夹，这里面放入今后所有的请求文件，例如新建一个请求用户信息的接口user.ts，代码如下：

1
2
3
4
5
6
7
8
// 导入axios实例import httpRequest from '@/request/index'// 定义接口的传参interface UserInfoParam {
    userID: string,
    userName: string}// 获取用户信息export function apiGetUserInfo(param: UserInfoParam) {
    return httpRequest({
        url: 'your api url',
        method: 'post',
        data: param,
    })}

接着在具体业务页面里使用这个请求，例如：

1
2
3
4
5
6
7
8
9
10
11
<script setup lang="ts">
import { onMounted } from 'vue'import { apiGetUserInfo } from '@/apis/user'function getUserInfo() {
    const param = {
        userID: '10001',
        userName: 'Mike',
    }
    apiGetUserInfo(param).then((res) => {
        console.log(res)
    })}onMounted(() => {
    getUserInfo()})
    </script>



作者：https://blog.csdn.net/xjtarzan/article/details/123682618

[最后修改由 admin， 于 2022-05-10 16:02:58]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2861

这篇日志没有评论。

此日志不可发表评论。