怎么使用vue3中的axios

這篇文章主要講解了“怎么使用vue3中的axios”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么使用vue3中的axios”吧！

使用 axios 之前，需要先安裝好。

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

上邊的四種安裝方式，根據(jù)你創(chuàng)建的項(xiàng)目，自行選擇方式。

一、axio 得基本使用

先創(chuàng)建一個(gè)組件，引入 axios 測(cè)試一下引入成功沒有！寫入以下代碼：

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

onMounted 是生命周期鉤子函數(shù)，頁面加載完成，就會(huì)調(diào)用這個(gè)網(wǎng)絡(luò)請(qǐng)求。axios的方法沒有設(shè)置網(wǎng)絡(luò)請(qǐng)求方式。默認(rèn)是 GET 請(qǐng)求。

打開服務(wù)，查看網(wǎng)絡(luò)請(qǐng)求的時(shí)候發(fā)現(xiàn)，請(qǐng)求失敗了：

報(bào)錯(cuò)內(nèi)容：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 代理解決這個(gè)問題，新建 vue.config.js 文件，添加配置：

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

刷新頁面查看效果的時(shí)候就尷尬了，請(qǐng)求地址完全正確，但是一直提示 404 找不到地址。

vue2中的項(xiàng)目，請(qǐng)求正常，但是在vue3中就是404。

在網(wǎng)絡(luò)請(qǐng)求處，添加全局配置，并把請(qǐng)求處的url中域名刪除掉。

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

修改完成后，刷新頁面網(wǎng)絡(luò)請(qǐng)求就變成成功了。

三、封裝

沒用一次三方庫，講最多的就是如何封裝，封裝后如何使用，直接用不香嗎？

很明白地告訴你，還是太年輕....多吃幾次虧就記住了。封裝最大優(yōu)點(diǎn)就是，如果三方框架內(nèi)有 bug 或者需要更改三方的時(shí)候，你只需要修改一個(gè)地方就修改完了，維護(hù)方便，工作量小，還不容易遺漏。

由于axios請(qǐng)求方法很多，所以封裝的時(shí)候可以有多種類型。

方式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=>{
 return response.data
},error=>{
 return Promise.error(error)
})
 
export function request(url='',params={},type='POST'){
 //設(shè)置 url params type 的默認(rèn)值
 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)
  })
 })
}
 
//使用時(shí)調(diào)用
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 返回本身就是一個(gè)promise對(duì)象，所以我們可以不給外層實(shí)例化 promise 對(duì)象，封裝變得更簡(jiǎn)單。

方式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'
 })
 
  //請(qǐng)求攔截
 instace.interceptors.request.use(config=>{
  return config
 },err=>{})
 //響應(yīng)攔截
 instace.interceptors.response.use(res=>{
  return res.data
 },err=>{
  //錯(cuò)誤處理
 })
 return instace(config)
}
//使用時(shí)調(diào)用
import {request} from './request'
request({
 url:'/hj/mp/banner/l',
}).then(res=>{
 console.log(res);
}).catch(err=>{
 console.log(err);
})

axios的封裝方式有很多，感興趣的同學(xué)，可以自己去 axios 文檔了解下，試著自己封裝一個(gè)，或者收藏一下，日后直接復(fù)制使用就好了，不用再辛苦封裝了。

四、全局引用 axios

可以把上述封裝的 request 方法，通過全局引用，這樣在項(xiàng)目的任意文件內(nèi)就都可以使用了。

在main.js內(nèi)添加全局屬性

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

上述三者的順序不可以調(diào)整哦！

在組件內(nèi)使用時(shí)：

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

能看到最后的恭喜你了，vue3中axios使用有變化的也就這點(diǎn)東西了。

感謝各位的閱讀，以上就是“怎么使用vue3中的axios”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么使用vue3中的axios這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！