第一集该文主要就目地是想说我身旁，已经开始学 vue3 或是预备学 vue3 的老师，vue3中互联网允诺axios该怎样采用，避免碰触了一点儿 vue3 的校友会有位疑点？开发周期、router 、vux采用都发生改变了，那 axios 采用是不是啥发生改变？

上恩

采用 axios 以后，须要先加装好。

yarn add axios npm install axios bower install axios<script src=“https://unpkg.com/axios/dist/axios.min.js”></script>

下边的三种加装形式，依照你建立的工程项目，另行优先选择形式。

一、axio 得基本上采用

先建立两个模块，导入 axios 试验呵呵导入获得成功没！载入下列标识符：

import axios from “axios” import { onMounted } from “vue” export default { setup(){ onMounted(()=>{ axios({ url:https://xxxxxx.net/hj/mp/banner/l}) }) } }

onMounted 是开发周期钳子表达式，网页读取顺利完成，就会初始化那个互联网允诺。axios的方式没增设互联网允诺形式。预设是 GET 允诺。

关上服务工程项目，查阅互联网允诺的这时候辨认出，允诺失利了：

收起文本：

Access to XMLHttpRequest at

https://xxxxx/hj/mp/banner/l from origin http://localhost:3000 has been blocked by CORS policy: No

Access-Control-Allow-Origin header is present on the requested resource.

提示存在跨域问题。

二、怎样解决跨域问题？

采用 proxy 代理解决那个问题，新建 vue.config.js 文件，添加配置：

module.exports={ devServer:{ proxy:{/api:{ target:https://xxxxx.net, changeOrigin:true, pathRewrite:{ ^/api: } } } } }

刷新网页查阅效果的这时候就尴尬了，允诺地址完全正确，但是一直提示 404 找不到地址。

vue2中的工程项目，允诺正常，但是在vue3中是404。

在互联网允诺处，添加全局配置，并把允诺处的url中域名删除掉。

axios.defaults.baseURL =/api axios.defaults.headers.post[Content-Type] =application/json axios({ url:/hj/mp/banner/l })

修改顺利完成后，刷新网页互联网允诺就变成获得成功了。

三、封装

没用一次三方库，讲最多的是怎样封装，封装后怎样采用，直接用不香吗？

很明白地说你，还是太年轻….多吃几次亏就记住了。封装最大优点是，如果三方框架内有 bug 或是须要更改三方的这时候，你只须要修改两个地方就修改完了，维护方便，工作量小，还不容易遗漏。

由于axios允诺方式很多，所以封装的这时候可以有多种类型。

形式1：

import axios from axios //全局配置 axios.defaults.baseURL = “/api”axios.defaults.timeout =5000 //拦截器 axios.interceptors.request.use( config=>{ return config },error=>{ return Promise.error(error) }) axios.interceptors.response.use( response=>{ returnresponse.data },error=>{ return Promise.error(error) }) export function request(url=,params={},type=POST){ //增设 url params type 的预设值 return new Promise((resolve,reject)=>{ let promise if( type.toUpperCase()===GET){ promise = axios({ url, params }) }else if( type.toUpperCase()=== POST){ promise = axios({ method:POST, url, data:params }) } //处理返回 promise.then(res=>{ resolve(res) }).catch(err=>{ reject(err) }) }) } //采用时初始化 import {request} from ../network/request.js export default { mounted(){ request(/hj/mp/banner/l).then(res=>{ console.log(res); }).catch(err=>{ console.log(err); }) } }

由于 axios 返回本身是两个promise对象，所以我们可以不给外层实例化 promise 对象，封装变得更简单。

形式2：

import axios from axios //全局配置 axios.defaults.baseURL = “/api” axios.defaults.timeout = 5000 export function request(config){ const instace = axios.create({ timeout:50000, method:post }) //允诺拦截instace.interceptors.request.use(config=>{ return config },err=>{}) //响应拦截instace.interceptors.response.use(res=>{ return res.data },err=>{ //错误处理 }) return instace(config) } //采用时初始化 import {request} from ./request request({ url:/hj/mp/banner/l, }).then(res=>{ console.log(res); }).catch(err=>{ console.log(err); })

axios的封装形式有很多，感兴趣的老师，可以自己去 axios 文档了解下，试着自己封装两个，或是收藏呵呵，日后直接复制采用就好了，不用再辛苦封装了。

四、全局引用 axios

可以把上述封装的 request 方式，通过全局引用，这样在工程项目地任意文件内就都可以采用了。

在main.js内添加全局属性

constapp = createApp(App) app.config.globalProperties.$http = request app.mount(#app)

上述三者的顺序不可以调整哦！

在模块内采用时：

import{ defineComponent, getCurrentInstance ,onMounted }from “vue” export defaultdefineComponent ({ setup(props,ctx){const { proxy } = getCurrentInstance() onMounted(()=>{ console.log(proxy); proxy.$http(/hj/mp/banner/l).then(res=>{ console.log(res); }) }) } })

能看到最后的恭喜你了，vue3中axios采用有变动的也就这点东西了。