详解uniapp项目中如何引入axios

一、什么是axios

axios是一个基于Promise的HTTP客户端，可同时在浏览器和Node.js中使用。它是一个比较流行的HTTP请求库，主要特点包括易用性、扩展性以及与浏览器和node.js的兼容性良好。无论在Vue.js、React.js还是AngularJS中的应用都可以轻易地使用axios。

axios的主要功能：

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换JSON数据

客户端支持防止CSRF等简单配置

二、在uniapp中引入axios

1. 安装axios

在uniapp项目中，在命令行中使用npm进行安装axios。通过以下命令进行安装。

npm install axios --save

可以看到，我们在项目的本地依赖中多了一个axios包，可在package.json文件中看见。

"dependencies": {

  "axios": "^0.24.0",
  ...
}

2. 全局引入axios

在main.js文件中，可以通过Vue.prototype.$axios全局引入axios，这样，我们的组件中就可以通过this.$axios使用axios进行网络请求了。

import Vue from 'vue'

import App from './App'
import axios from 'axios'
//全局注册，之后可在其他组件中通过this.$axios发送请求
Vue.prototype.$axios = axios  
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

注意，在uniapp中使用axios时，需要将axios的默认请求头部“Content-Type”修改为“application/x-www-form-urlencoded”，否则在发送POST请求时可能会遇到“415 Unsupported Media Type”的错误。

//在main.js中全局设置axios的请求头

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

3. 在组件中使用axios发送请求

在uniapp中，可以在vue组件中通过this.$axios.{method}()方式调用对应的请求方法，如get、post等。组件中的axios调用示例如下所示：

export default {

    name: "Example",
    data() {
        return {
            message: []
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.$axios.get('/api/user').then(response => {
                console.log(response.data);
                if (response.data.code === 200) {
                    const {data} = response.data;
                    this.message = data;
                }
            }).catch(error => {
                console.log(error)
            });
        },
    }
}

以上代码中，我们通过this.$axios.get()方式发送了一个GET请求，并在请求完成后返回的结果中进行了成功与失败的处理。

三、小结

在uniapp项目中使用axios发送网络请求并不复杂。需要先安装axios，然后在main.js文件中进行全局引入并设置请求头，最后在组件中使用this.$axios.{method}()方式进行请求。

要注意的是，uniapp中的axios和浏览器中的axios存在一些差异，如请求头的设置，需要根据实际情况选择特定的设置方式。

总之，axios可以帮助我们方便地处理网络请求，并提供了丰富的功能，值得开发者们在uniapp项目中尝试使用。