快捷導(dǎo)航

vue3?HTTP請求中的axios示例詳解

更新時(shí)間：2022年12月26日 15:24:02 作者：西京刀客

Axios?是一個(gè)簡單的基于?promise?的?HTTP?客戶端，適用于瀏覽器和?node.js。Axios?在具有非?？蓴U(kuò)展的接口的小包中提供了一個(gè)簡單易用的庫，這篇文章主要介紹了vue3-HTTP請求之a(chǎn)xios,需要的朋友可以參考下

vue3-HTTP請求

背景

vue本身不支持發(fā)送AJAX請求，需要使用vue-resource、axios等插件實(shí)現(xiàn)。
axios是一個(gè)基于Promise的HTTP請求客戶端，用來發(fā)送請求，也是vue2.0官方推薦的，同時(shí)不再對vue-resource進(jìn)行更新和維護(hù)。

axios

官網(wǎng): https://axios-http.com/
github：https://github.com/axios/axios

Axios 是一個(gè)簡單的基于 promise 的 HTTP 客戶端，適用于瀏覽器和 node.js。Axios 在具有非?？蓴U(kuò)展的接口的小包中提供了一個(gè)簡單易用的庫。

安裝axios并引入

安裝:
npm的方式：

npm install axios --save

引入,【在哪里使用，就在哪里引入】

import axios from 'axios';

使用demo：
main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
    <div>
        <div v-if="!repositoryUrl">loading...</div>
        <div v-else>most star repository is <a :href="repositoryUrl" rel="external nofollow"     >{{repositoryName}}</a></div>
    </div>
    <!--App -->
</template>

<script>
    import axios from 'axios';
    
    export default {
        data() {
            return {
                repositoryUrl : '',
                repositoryName : ''
            }
        },
        
        mounted() {
            // 發(fā)ajax請求，用以獲取數(shù)據(jù)，此處地址意思是查詢 github中 vue 星數(shù)最高的項(xiàng)目
            const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
            
            axios.get(url).then(
                response => {
                    const result = response.data.items[0];
                    console.log(result)
                    this.repositoryUrl = result.html_url;
                    this.repositoryName = result.name;
                }
            ).catch(
                response => {
                    alert('請求失敗');
                },
            );
        }
    }
</script>

<style>

</style>

axios POST提交數(shù)據(jù)

Content-Type: application/json

const url = '/api/v1/web3/url/list_by_category';

let data = {"category":"tools"};

axios.post(url,data).then(
  response => {
    const result = response.data.data;
    console.log(result)
    this.repositoryName = result.name;
    this.web3_urls = result


  }).catch(response => {
    alert('請求失敗');
  },
  );

工作中遇到常見問題

has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

cors阻止了你請求的資源（跨域問題）

解決方案：
在vue3.0中解決跨域首先要配置vue.config.js（在根目錄下創(chuàng)建vue.config.js、跟package.json同級的地方）
vue.config.js

在vue.config.js中加入以下代碼

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://www.xxx.com/', //接口域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https接口
                pathRewrite: {                  //路徑重置
                    '^/api': ''
                }
            }
        }
    }
};

我用的vite，參考
vue3（vite）設(shè)置代理，封裝axios，api解耦
參考URL: http://m.fzitv.net/article/271024.htm
官方：https://vitejs.dev/config/server-options.html

我們修改的是vite.config.js,內(nèi)容如下，核心就是加入了 server–> proxy字段：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
          target: 'http://127.0.0.1:8000/', //接口域名
          changeOrigin: true,             //是否跨域
          ws: false,                       //是否代理 websockets
          secure: false,                   //是否https接口
          pathRewrite: {                  //路徑重置
              '^/api': ''
          }
      }
    }
  }
})