Vue组件之axios_2023-01-07

前言

• axios是一个用来发送网络请求（比如get，post等）的一个框架。
• vue-axios对axios进行了轻度封装，主要作用是方便在vue项目中快捷调用。不使用vue-axios也问题不大。

1. 安装

• 以下仅记录vue cli项目下的axios安装使用。
• 如果直接在html文件也可以通过引用的方式使用，具体查看官方文档。

1.1 下载

• 在Vue工程项目下执行如下命令：

npm install --save axios vue-axios

1.2在main.js文件中注册

• 注意，导入我们自定义的组件之前进行vue-axios模块的导入。意思就是ElementPlus框架之前完成导入。否则会提示Error in mounted hook: “TypeError: Cannot read property ‘get‘ of undefined

import VueAxios from 'vue-axios'
import axios from 'axios'

const app = createApp(App)
app.use(VueAxios,axios)
app.use(ElementPlus)

1.3使用

• 在任何组件中如下使用
• This wrapper bind axios to Vue or this if you’re using single file component。翻译过来就是vue-axios封装把axios绑定到你的组件中

this.axios.get(api).then((response) => {
  console.log(response.data)
})

2. 不使用vue-axios的情况

• import导入了axios对象。把这个对象手动绑定到全局原型中。

vue3的写法和组件的使用

import { createApp } from 'vue'
app.config.globalProperties.$axios = axios

使用

this.$axios.get

3. 不使用全局变量的情况

• import导入了axios对象。把这个对象绑定到组件的某一个变量即可。或者直接引用也可以。
• 在vue文件如下书写

<script>
import axios from 'axios'
data(){
  return {
    axios: axios
  }
},
</script>

4. axios快捷方法

     // 快捷发起POST请求，data设置请求的参数
     axios.post(url[, data[, config]])
     // 快捷发起DELETE请求
     axios.delete(url[, config])
     // 快捷发起HEAD请求
     axios.head(url[, config])
     // 快捷发起OPTIONS请求
     axios.options(url[, config])
     // 跨界发起PUT请求
     axios.put(url[, data[, config]])
     // 快捷发起PATCH请求
     axios.patch(url[, data[, config]])

5. axios使用自己的配置来进行数据请求（参数是一个配置对象）

this.axios({method:'get', url:''})

5.1 配置清单

• 可以看到，axios支持很多配置

  
  image.png

image.png

5.2 实例化axios，使用自己的个性化配置。

• 可以创建一个axios，专门使用个性化配置。比如说1号axios访问a网，2号axios访问b网，方便代码书写和阅读。下列方法接收一个如上的配置对象。

const instance = this.axios.create({})

5.3 axios默认配置

• 每一次都书写一遍配置，很烦，所以提供了默认配置。如下方法进行修改

this.axios.defaults.baseURL=''

6. axios请求的返回

• axios会返回一个Promise对象，通过此对象，异步等待数据返回。可以通过then方法处理数据返回后的操作。返回一个封装好的数据。

  
  image.png

7. axios拦截器

7.1 请求前拦截

    this.axios.interceptors.request.use(
        config=>{
          console.log(config)
          return config
        },
        error => {
          console.log(error)
          return Promise.reject(error)
        }
    )

7.2 请求后拦截

this.axios.interceptors.response.use()

7.3 移除拦截器

let i =   this.axios.interceptors.request.use(
        config=>{
          console.log(config)
          return config
        },
        error => {
          console.log(error)
          return Promise.reject(error)
        }
    )

this.axios.interceptors.request.eject(i)

8. 跨域的处理

• 如果请求提示如下，则表明产生了跨域

  
  image.png

• vue.config.js下添加如下代理

module.exports = {
  devServer: {
    proxy: {
      //以/myApi开头的请求进行代理
      '/myApi': {
        target : 'http://localhost',
        changeOrigin : true, //允许跨域
        secure : false,
        pathRewrite:{ //把myApi清掉
          '^/myApi' : ''
        }
      }
    }
  }
}

• 访问如下书写即可

this.axios.post("/myApi"+"/dms/PSSVEZ")