Axios – 网络请求库基本使用

简介

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

使用方法

axios 实际上是基于 Promise 研发的库，因此它包含了所有 Promise 的特性

GET和POST

方法一：实例方法法

axios.get('url')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });

GET传参需要把数据放到params成员属性中，而POST只需要直接传递数据对象即可，如下：

axios.post('url',{ name:'zs', id:1 })

方法二：对象属性法

axios({
    // 请求方法
    method:'get or post',
    // 相对或绝对url路径
    url:'fooUrl',
    // 绝对基础路径(固定url前缀的地址路径)
    baseURL:'fooBaseUrl',
    // 请求参数,GET时使用
    params:{
        id:1,
        name:'fooName'
     },
    // 请求参数，POST时使用
    data:{
        id:1,
        name:'fooName'
    }
})
 .then( (res)=>{
    console.log( res.data )
} )

把 Axios 挂到 Vue 实例中 [2.0]

Axios 在项目中比较常用，有时部分组件也可能会使用 Axios 请求数据，但是总不能每个组件需要使用 Axios 时在组件中导入 Axios ,所以可以把 Axios 挂到 Vue 实例原型中。

main.js 文件

import axios from "axios";

Vue.prototype.$http = axios

在别的组件中使用 Axios 不需要导入 Axios ,只需要调用 this.$http 即可。

this.$http.get('fooUrl')
this.$http.post('fooUrl',{name:'zx', age:18})

把 Axios 挂到 Vue 实例中 [3.0]

在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios

main.js

// 引入 Vue 3.0 和 axios 依赖
import {createApp} from 'vue'
import axios from 'axios'
import App from '.../App.vue'
//创建 Vue 实例
const app = createApp(App)
// 设置axios 的根路径
axios.default.baseURL = 'xxx'
// 把 axios 挂载到 app 中
app.config.globalProperties.$http = axios
// app 挂载 网页DOM
app.mount('#app')

使用时，使用 this.$http.get() 等方法即可

getInfo(){
     this.$http.get('/xxx')
     this.$http.post('/xxx')
}

封装 request.js 模块

在实际项目中，很少会使用把 Axios 挂到 Vue 实例中的方案，因为这种方案对于代码的复用性很差，通当我们会新建一个 utils 文件夹，用于存放各种工具类 js, 我们可以二次封装 Axios 到一个新的模块，用于保存 Axios 的请求根域名或其它自定义配置。

utils/request.js 文件

import axios from "axios";

const request = axios.create({
    baseURL:'https://www.escook.cn'
})

export default request;

这样可以在项目中调用该工具类文件，可以复用 Axios 的自定义配置。

省略请求根 URL

如果预到请求改变，可能会让所有组件都要重新设置，可以在 main.js 文件中预先设置 baseURL

main.js 文件

axios.defaults.baseURL = '请求根路径'

缺点是不利于api接口的复用，增加代码冗余。

参考资料

https://www.axios-http.cn/docs/intro