笔记大全

详解uniapp项目中怎么引入axios

更新时间：2023-10-03

第一段：安装axios

在uniapp项目中引入axios需要通过npm进行安装axios，安装方法如下：

npm install axios --save

安装完成后，我们需要在main.js中引入axios，代码如下：

// main.js
import axios from 'axios'
Vue.prototype.$axios = axios

第二段：封装axios

为了方便调用和使用，我们一般会封装一个axios.js文件，在该文件中可以设置请求的拦截器和响应的拦截器，或者设置请求的默认参数，代码如下：

// axios.js
import axios from 'axios'

//请求拦截器
axios.interceptors.request.use(
   config => {
       // 设置默认请求头
       config.headers.common['Authorization'] = localStorage.getItem('token')
       return config;
   },
   error => {
       return Promise.reject(error);
   });

// 响应拦截器
axios.interceptors.response.use(
   response => {
       return response;
   },
   error => {
       if(error.response.status===401) {
        //跳转到登录页
         router.replace({
           path: '/login'
         });
       }
      return Promise.reject(error);
   });

//设置默认请求地址
axios.defaults.baseURL = 'http://localhost:8080'

export default axios

第三段：使用axios

在vue组件中可以直接使用this.$axios来进行请求数据，可以使用get、post、put、delete等请求方式，代码如下：

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
     this.$axios.get('/api/user').then(response => {
       console.log(response)
     }).catch(error=>{
       console.log(error)
     })
  }
}

第四段：测试axios

使用了axios后，我们需要测试一下是否可以正常的发送请求和接收数据，下面我们来模拟一下接口，代码如下：

// server.js
const express = require('express')
const app = express()
const port = 8080

app.get('/api/user', (req, res) => {
  res.json({
    code:0,
    message:'success',
    data:{
       name:'Tom',
       age:'18'
    }
  })
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

启动后，我们可以在浏览器中打开http://localhost:8080/api/user来查看返回的数据

c语言编程笔录