微信小程序开发使用axios

原创

mob64ca12e58adb 2024-07-12 05:40:04 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e58adb的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何在微信小程序开发中使用axios

1. 步骤概述

首先，我们需要安装axios库，并在小程序中引入该库，然后配置axios的请求拦截器和响应拦截器，最后我们可以通过axios发送请求获取数据。

以下是整个流程的步骤：

flowchart TD
    A[安装axios] --> B[引入axios]
    B --> C[配置拦截器]
    C --> D[发送请求]

2. 具体步骤

2.1 安装axios

在小程序根目录下打开终端，执行以下命令安装axios库：

npm install axios

2.2 引入axios

在小程序的入口文件（如app.js）中引入axios库：

// app.js
const axios = require('axios')

2.3 配置拦截器

在小程序中配置axios的请求拦截器和响应拦截器，可以在发送请求前和接收响应后进行一些操作，比如添加token，处理错误等。

// 请求拦截器
axios.interceptors.request.use(config => {
    // 在发送请求前做些什么
    config.headers.Authorization = 'Bearer token'  // 添加token
    return config
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use(response => {
    // 对响应数据做些什么
    return response.data
}, error => {
    // 对响应错误做些什么
    return Promise.reject(error)
})

2.4 发送请求

在需要发送请求的地方，使用axios发送请求获取数据：

// 发送GET请求
axios.get('
    .then(response => {
        console.log(response)
    })
    .catch(error => {
        console.error(error)
    })

// 发送POST请求
axios.post(' { key: 'value' })
    .then(response => {
        console.log(response)
    })
    .catch(error => {
        console.error(error)
    })