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使用

你可能感兴趣的:(vue3,javascript,vue.js)