vue3学习笔记——Axios使用技巧总结
vue3.0中的Axios使用第一种:axiosaxios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定:引入npm install axios -S1、局部使用(组件内)<script>import axios from "axios";export default {name:'xxx',methods:{async getDa
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使用
更多推荐
所有评论(0)