vue3学习笔记——Axios使用技巧总结

vue3.0中的Axios使用

第一种：axios

axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定：

• 引入

  npm install axios -S
  

1、局部使用（组件内）

<script	>
	import axios from "axios";
	export default {
	   name:'xxx',
	   methods:{
	   		async getDate(){
	   		  return awiat axios.get('/xxx')
	   		}
	   }
	}
<script/>

2、全局定义

• 配置

  vue2写法：

  import Vue from 'vue'
  import axios from 'axios'
  
  Vue.prototype.$axios = axios //把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送请求
  

  vue3写法:

  import {createApp} from 'vue'
  import App from './App.vue'
  import axios from "axios";
  
  const app = createApp(App)
  axios.defaults.baseUrl = '/xxx' //base_url
  //vue3.0取消了Vue.prototype，官方文档推荐使用globalProperties
  app.config.globalProperties.$http = axios
  

• 使用（vue3写法）

  延伸：react hooks（翻译，钩子）介绍

  Hooks是一个新的React特性提案，组件尽量写成纯函数，如果需要外部React特性（比如状态管理，生命周期），就用钩子把外部特性"钩"进来，通常函数名字都是以use开头。首次在v16.7.0-alpha版本中添加，在v16.8.0中正式发布

  Hooks产生的背景

  • 跨组件复用stateful logic十分困难 使用Hooks，你可以在将含有state的逻辑从组件中抽象出来，这将可以让这些逻辑容易被测试。同时，Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑。

  • 复杂的组件难以理解 Hooks允许您根据相关部分(例如设置订阅或获取数据)将一个组件分割成更小的函数，而不是强制基于生命周期方法进行分割

  • 不止是用户，机器也对Classes难以理解 Hooks让你可以在classes之外使用更多React的新特性

  vue_hooks：**

  vue3.0当中为了代码更好的复用，借鉴Hooks这个概念，新增组合式API,setup()是它的入口函数

  setup()执行的的时间在beforecreated之前，所以内部不能使用this;

  vue3当中就用getCurrentInstan来作为上下文环境

  useAxios.js(单独定义的一个hooks)

  import {getCurrentInstance} from 'vue'
  
  export const useAxios = () => {
    	//vue3当中hooks是在beforeCreate之前执行的
      let {proxy} = getCurrentInstance()
  
      const getData = async () => {
          console.log(await proxy.$http.get('/xxx'))
      }
  
      return {
          getData,
      }
  }
  

  组件内引用

  <template>
    <button @click="getData"> {{ text }}</button>
  </template>
  <script>
  import {useAxios} from './index'
  export default {
    name: "useAxios",
    setup() {
      const {getData} = useAxios()
  	
      return {
        text,
        getData,
      }
    }
  }
  </script>
  

第二种：vue-axios

vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装：

• 引入

  npm install vue-axios axios -S
  

• 配置

  // import Vue from 'vue'   // in Vue 2
  import * as Vue from 'vue' // in Vue 3
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  
  //Vue.use(VueAxios, axios)  // in Vue 2
  
  const app = Vue.createApp(...)  // in Vue 3
  app.use(VueAxios, axios)
  

• 使用

  Vue 2——Option API：

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

  Vue3——组合式API:

  main.js
  import { createApp } from 'vue'
  import App from './App.vue'
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  
  const app = createApp(App)
  app.use(VueAxios, axios)  //写在provide前面
  app.provide('HTTP', app.config.globalProperties.axios)  // provide 'axios'
  app.use(store).use(router).mount('#app')
  
  // App.vue
  import { inject } from 'vue'
  
  export default {
    name: 'Comp',
    setup() {
      const HTTP = inject('HYYP')  // inject axios
  
      const getList = ()=> {
        HTTP.get(api)
          .then((response: { data }) => {
            console.log(response.data)
          });
      };
  
      return { getList }
    }
  }
  

第三种：request.js_——项目中自定义

• 项目中创建自己的axios，并配置拦截等操作，并导出

utils/request.js

import axios from "axios";
import qs from 'qs' //字符串解析和字符串化
// import store from '@/store/index'  //处理登录验证token等会用到
const service = axios.create({
    baseURL:'http://10.0.0.221:8819',
    timeout: 5000,
    headers: {'X-Custom-Header': 'foobar'}  //设定的请求头
})
// request interceptor 请求拦截
service.interceptors.request.use(
    function (config) {
        // 处理响应成功数据
        return config;
    },
    function (error) {
        // 处理响应错误
        return Promise.reject(error);
    }
);
// response interceptor 响应拦截
service.interceptors.response.use(
    function (response) {
        // 处理响应成功数据
        return response;
    },
    function (error) {
        // 处理响应错误
        return Promise.reject(error);
    }
);

export {
    service
}

• 定义项目中GET、 POST等请求，和常用的API

  api/managejs

  import {service} from '@/util/request'
  
  const api = {
      list:'/nrapb/patternFile/list'
  }
  export default api
  //post
  export function postAction(url,parameter) {
      return service({
          url: url,
          method:'post' ,
          data: parameter
      })
  }
  //post method= {post | put}
  export function httpAction(url,parameter,method) {
      return service({
          url: url,
          method:method ,
          data: parameter
      })
  }
  
  //put
  export function putAction(url,parameter) {
      return service({
          url: url,
          method:'put',
          data: parameter
      })
  }
  
  //get
  export function getAction(url,parameter) {
      // console.log(url,parameter)
      return service({
          url: url,
          method: 'get',
          params: parameter
      })
  }
  
  

注：vue3遇到的关于axios的问题

**问题1：**在vuex状态管理中Action经常用来进行异步请求，不能通过在globalProperties全局定义的axios，进而从getCurrentInstance获得axios对象，何解？

全局：

• vue-axios使用provide/inject
• 自定义导入使用

局部：

• 局部引入axios使用