前言：在探索vue3.0的道路上調(diào)接口這件事很重要，所以我就把我探索出來的這條道展示出來，為大家提供便利，望喜歡，廢話不多說展示！??！

第一步：在src下創(chuàng)建一個(gè)http文件夾，創(chuàng)建一個(gè)config的js文件！

作用是：拋出基礎(chǔ)請(qǐng)求方式、基礎(chǔ)前綴、請(qǐng)求頭信息、參數(shù)、超時(shí)時(shí)間、憑證、后端接口返回?cái)?shù)據(jù)類型！

//import { baseUrl } from '@/utils/global'

export default {
  method: 'get',
  // 基礎(chǔ)url前綴
  baseUrl: process.env.BASE_URL,
  // 請(qǐng)求頭信息
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // 參數(shù)
  data: {},
  // 設(shè)置超時(shí)時(shí)間
  timeout: 10000,
  // 攜帶憑證
  withCredentials: true,
  // 返回?cái)?shù)據(jù)類型
  responseType: 'json'
}

第二步：在src下創(chuàng)建一個(gè)http文件夾，創(chuàng)建一個(gè)axios的js文件！

作用是：使用請(qǐng)求攔截器和響應(yīng)攔截器解決下邊的問題

• 從瀏覽器中創(chuàng)建 XMLHttpRequests
• 從 node.js 創(chuàng)建 http 請(qǐng)求
• 支持 Promise API
• 攔截請(qǐng)求和響應(yīng)
• 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
• 取消請(qǐng)求
• 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
• 客戶端支持防御 XSRF

import axios from 'axios'

const request = axios.create({
    baseURL: '/api',  // 注意??！ 這里是全局統(tǒng)一加上了 '/api' 前綴，也就是說所有接口都會(huì)加上'/api'前綴在，頁面里面寫接口的時(shí)候就不要加 '/api'了，否則會(huì)出現(xiàn)2個(gè)'/api'，類似 '/api/api/user'這樣的報(bào)錯(cuò)，切記?。?！
    timeout: 5000
})

// request 請(qǐng)求器
// 可以自請(qǐng)求發(fā)送前對(duì)請(qǐng)求做一些處理
// 比如統(tǒng)一加token，對(duì)請(qǐng)求參數(shù)統(tǒng)一加密
request.interceptors.request.use(config => {
    if(config && config.headers){
        config.headers['Content-Type'] = 'application/json;charset=utf-8';
    }
    // config.headers['token'] = user.token;  // 設(shè)置請(qǐng)求頭
    return config
}, error => {
    return Promise.reject(error)
});

// response 攔截器
// 可以在接口響應(yīng)后統(tǒng)一處理結(jié)果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服務(wù)端返回的字符串?dāng)?shù)據(jù)
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

第三步：在src下創(chuàng)建一個(gè)http文件夾，例：創(chuàng)建一個(gè)data的文件夾下創(chuàng)建一個(gè)index.js！

作用是：這里是放你要請(qǐng)求的接口url、請(qǐng)求方式post/get、傳參data最后通過export default方式拋出在頁面上調(diào)用！

import axios from "../axios";

export const alldata=(data)=>{
  return axios({
    url:'/article/data',
    method:'post',
    data
  })
}


export default {alldata}

第四步：在終端輸入命令!

作用是：下載axios！

npm i axios -g

第五步：在main.js根文件掛載axios！

作用是：vue3不支持以 Vue.prototype的方式綁定全局變量,只能以app.config.globalProperties.$http在全局綁定！

圖片示例：

?文章來源地址http://www.zghlxwxcb.cn/news/detail-809635.html

import axios from 'axios'

app.config.globalProperties.$http=axios;

第六步：要在vue.config.js更改配置實(shí)現(xiàn)跨域！

作用是：通過這個(gè)服務(wù)與另一個(gè)網(wǎng)絡(luò)終端（一般為服務(wù)器）進(jìn)行非直接的連接通過proxy也更改axios發(fā)送請(qǐng)求中，配置請(qǐng)求的根路徑！

// 配置跨域
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // lintOnSave:false,
  devServer: {
    port: 8080, // 端口
    proxy: {
      '/api': {  //   若請(qǐng)求的前綴不是這個(gè)'/api'，那請(qǐng)求就不會(huì)走代理服務(wù)器
        target: 'http://156.61.146.85:8078',  //這里寫路徑 
        pathRewrite: { '^/api': '' }, //將所有含/api路徑的，去掉/api轉(zhuǎn)發(fā)給服務(wù)器
        ws: true,  //用于支持websocket
        changeOrigin: true   //用于控制請(qǐng)求頭中的host值
      },
    }
  }

})

第七步：在需調(diào)接口的頁面寫上所要用的方法，生命周期，初始值，引入的方法！

作用是：調(diào)接口渲染頁面！

圖片示例：

import { reactive,onMounted} from "vue";
import {alldata} from "@/http/Home/home.js"
    export default {
    name: "app",
      setup(){
        const datas = reactive({
          value:[],
        })
        const methods = {
          requestall(){
            const data={
              pageNum:10,
              pageSize:5,
              articieId:100,
            };
            alldata(data).then(res => {
              datas.value=res
              console.log(res);
            }).catch(err => {
              console.log(err)
            })
          }
        }
        onMounted(()=>{
          methods.requestall()
        })
        return{
          ...methods
        }
      }
    }

?結(jié)果：接口調(diào)通了200狀態(tài)碼，參數(shù)傳過去了data，接口的數(shù)據(jù)也請(qǐng)求到了,vue3.0前后交互達(dá)成！！！

圖片示例：

????????????????

?

?

?

?

?

到了這里，關(guān)于前端實(shí)現(xiàn)vue3使用axios調(diào)用后端接口的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！