前端vue3使用axios調用后端接口的實現(xiàn)方法

更新時間：2022年12月05日 11:02:45 作者：專心致志的程序員！

vue本身不支持ajax接口的請求,所以在vue中經(jīng)常使用axios這個接口請求工具,下面這篇文章主要給大家介紹了關于前端vue3使用axios調用后端接口的實現(xiàn)方法,需要的朋友可以參考下

前言：
第一步：在src下創(chuàng)建一個http文件夾，創(chuàng)建一個config的js文件！
第二步：在src下創(chuàng)建一個http文件夾，創(chuàng)建一個axios的js文件！
第三步：在src下創(chuàng)建一個http文件夾，例：創(chuàng)建一個data的文件夾下創(chuàng)建一個index.js！
第四步：在終端輸入命令!
第五步：在main.js根文件掛載axios！
第六步：要在vue.config.js更改配置實現(xiàn)跨域！
第七步：在需調接口的頁面寫上所要用的方法，生命周期，初始值，引入的方法！
總結

前言：

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

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

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

 
//import { baseUrl } from '@/utils/global'
 
export default {
  method: 'get',
  // 基礎url前綴
  baseUrl: process.env.BASE_URL,
  // 請求頭信息
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // 參數(shù)
  data: {},
  // 設置超時時間
  timeout: 10000,
  // 攜帶憑證
  withCredentials: true,
  // 返回數(shù)據(jù)類型
  responseType: 'json'
}

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

作用是：使用請求攔截器和響應攔截器解決下邊的問題

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

import axios from 'axios'
 
const request = axios.create({
    baseURL: '/api',  // 注意！！ 這里是全局統(tǒng)一加上了 '/api' 前綴，也就是說所有接口都會加上'/api'前綴在，頁面里面寫接口的時候就不要加 '/api'了，否則會出現(xiàn)2個'/api'，類似 '/api/api/user'這樣的報錯，切記?。?！
    timeout: 5000
})
 
// request 請求器
// 可以自請求發(fā)送前對請求做一些處理
// 比如統(tǒng)一加token，對請求參數(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;  // 設置請求頭
    return config
}, error => {
    return Promise.reject(error)
});
 
// response 攔截器
// 可以在接口響應后統(tǒng)一處理結果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服務端返回的字符串數(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)建一個http文件夾，例：創(chuàng)建一個data的文件夾下創(chuàng)建一個index.js！

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

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在全局綁定！

圖片示例：

import axios from 'axios'
 
app.config.globalProperties.$http=axios;

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

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

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

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

作用是：調接口渲染頁面！

圖片示例：

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
        }
      }
    }

結果：接口調通了200狀態(tài)碼，參數(shù)傳過去了data，接口的數(shù)據(jù)也請求到了,vue3.0前后交互達成！?。?/p>

圖片示例：