Vue学习：31-Axios的使用

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #前端

Vue入门教程专栏收录该内容

31 篇文章

订阅专栏

一、Axios的安装和常用配置项

Axios是一个基于promise网络请求库，作用于node.js和浏览器中

Axios在服务端它使用原生node.js http模块，而在客户端（浏览器端）则使用 XMLHttpRequests

Axios默认传的是用application/json格式

Axios可以拦截请求和响应、转换请求和响应数据、取消请求、自动转换JSON数据

Axios安装方式：npm install axios、pnpm add axios

常用的Axios配置项：

这些是创建请求时最常用的配置选项；详细的配置项请前往Axios官网

提示：只有url是必需的；如果没有指定method，则请求将默认使用GET方法

{
    url: '/user', // 请求的服务器地址 URL        
    method: 'GET', // 请求方式，默认值 GET
    baseURL: 'https://some-domain.com/api/', // 如果 url 不是绝对地址，则会发送请求时在 url 前方加上 baseURL
    headers: {'X-Requested-With': 'XMLHttpRequest'}, // 自定义请求头
    params: { ID: 12345 }, // 与请求一起发送的 URL 参数
    data: { firstName: 'Fred' },  // 作为请求体被发送的数据，仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
    timeout: 1000, // 请求超时的毫秒数，如果请求时间超过 `timeout` 的值，则请求会被中断，默认值是 `0` (永不超时)，
    responseType: 'json', // 期望服务器返回的数据类型，选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'， 浏览器专属：'blob'，默认值 json
    // 允许在向服务器发送前，修改请求数据，它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    transformRequest: [function (data, headers) {   
        return data; // 对发送的 data 进行任意转换处理
    }],
    // 在传递给 then/catch 前，允许修改响应数据
    transformResponse: [function (data) {
        return data; // 对接收的 data 进行任意转换处理
    }]
}

二、发送请求

可以向 axios传递相关配置来创建请求

（一）axios(config)

发送一个POST请求

axios({
    method: 'POST', // 请求方式
    url: '/example-url/……', // 请求地址
    // …… 其他配置 ……
})

发送一个GET请求

axios({
    method: 'GET', // 请求方式，可省略不写
    url: '/example-url/……', // 请求地址
    // …… 其他配置 ……
})

（二）axios(url[, config])

发送一个 POST 请求

axios(
    '/example-url/……', // 请求地址
    {
        method: 'POST', // 请求方式
        // …… 其他配置 ……
    }
)

发送一个GET请求

axios(
     '/example-url/……', // 请求地址
    {
        method: 'GET', // 请求方式，可省略不写
        // …… 其他配置 ……
    }
)

（三）请求方式别名

为了方便起见，已经为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意：在使用别名方法时，url、method、data 这些属性都不必在config中指定

发送一个 POST 请求

axios.post(
    '/example-url/……', // 请求地址
    { /* 请求体中的参数 */ },
    { /* 其他配置 */ },
)

发送一个GET请求

axios.get(
    '/example-url/……', // 请求地址
    { /* 其他配置 */ },
)

三、自定义创建实例（二次封装）

axios.create([config])：调用create函数传入自定义配置，来创建自定义axios实例，即二次封装

src/request/axiosInstance .js

import axios from 'axios'

const request = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
})

export default request

使用自定义实例发送请求：

import request from '@/request/axiosInstance.js'

request({
    method: 'POST', // 请求方式
    url: '/example-url/……', // 请求地址
    // …… 其他配置 ……
})

import request from '@/request/axiosInstance.js'
request('/example-url/……', // 请求地址
    {
        method: 'POST', // 请求方式
        // …… 其他配置 ……
    }
)

import request from '@/request/axiosInstance.js'

request.post(
    '/example-url/……', // 请求地址
    { /* 请求体中的参数 */ },
    {/* …… 其他配置 …… */}
)

四、响应数据及错误处理

发送请求后通过.then(response => {})来获取服务器响应的数据

response响应式结构：

data：服务器提供的响应【最重要】
status：来自服务器响应的 HTTP 状态码，成功为200，请求地址不存在为404，服务器异常为500，请求方式错误为405……
statusText：来自服务器响应的 HTTP 状态信息
headers：服务器响应头
config：请求的配置信息
request：生成此响应的请求，在node.js中它是最后一个ClientRequest实例，在浏览器中则是XMLHttpRequest实例

axios({
    method: 'GET',
    url: '/example-url/……'
    // …… 其他配置 ……
}).then(response => {
    console.log(response.data) // 获取服务器传递来的数据
})

axios.get(
    url: '/example-url/……'
    { /* …… 其他配置 …… */ }
)
.then(response => {
    console.log(response.data) // 获取服务器传递来的数据
})

请求错误处理：

发送请求后，使用.catch(error => {})来处理此次请求异常，请求成功发出且服务器也响应了状态码，但状态代码超出了2xx的范围

axios({
    method: 'GET', // 请求方式
    url: '/example-url/……', // 请求地址
}).catch(error => {
    console.log('请求失败！')
})

五、跨域问题

跨域：指的是浏览器不能执行其他网站的脚本；它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域
浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源，如果未处理跨域访问则会在请求时控制台出现Access-Control-Allow-Origin……的报错信息
如何处理跨域问题，可在vite项目的vite.config.js文件中添加proxy代理

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    // 服务
    server: {
        // 代理
        proxy: {
            '/ok': {
                target: 'https://v.api.aa1.cn/api', // 代理后台服务器地址
                changeOrigin: true, //允许跨域               
                rewrite: path => path.replace(/^\/ok/,'') // 将请求地址中的 /ok 替换成空
            }
        }
    }
})

六、案例

本次请求测试采用的是万维易源提供的测试API，当然如果你有自己的测试的API也可测试自己的API

提示：测试万维易源提供的接口需要登录其账号获取鉴权私钥，方可测试，网址：https://route.showapi.com

解决跨域问题：

vite.config.js

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: 'https://route.showapi.com/',  //代理后台服务器地址
        changeOrigin: true,  //允许跨域
        rewrite: path => path.replace(/^\/api/,'')  //将请求地址中的/apispace替换成空
      }
    }
  }
})

案例：手机号测吉凶

请求示例：

//使用原生javascript编写访问程序
const axios = require('axios');

/**
 * 发起一个POST请求到指定的URL，并携带特定的表单数据。
 * @param {string} appKey - 应用的密钥。
 * @param {string} mobile - 手机号码。
 */
async function sendPostRequest(appKey, mobile) {
  // 定义请求的URL，注意替换{your_appKey}为实际的appKey值
  const url = `https://route.showapi.com/1617-1?appKey=${appKey}`;

  // 表单数据需要进行URL编码
  const formData = new URLSearchParams();
  formData.append('mobile', mobile);

  try {
    // 发起POST请求，并设置content-type为application/x-www-form-urlencoded
    const response = await axios.post(url, formData, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    });

    // 处理响应数据
    console.log('Response:', response.data);
  } catch (error) {
    // 处理请求失败的情况
    console.error('Error occurred:', error.message);
  }
}

// 示例调用
sendPostRequest('{your_appKey}', '1377xxxx777');

返回数据示例：

{
  "showapi_res_error": "",
  "showapi_res_id": "6704dc5dfb638c9a20839791",
  "showapi_res_code": 0,
  "showapi_fee_num": 1,
  "showapi_res_body": {
    "ret_code": "0",
    "remark": "查询成功！",
    "expList": [
      "号码：17705213245",
      "数理：第45数",
      "签语：杨柳遇春，绿叶发枝，冲破难关，一举成名",
      "吉凶：吉",
      "详解：主人的性格类型：[要面包不要爱情型]，其具体表现为：责任心重，尤其对工作充满热诚，是个彻头彻尾工作狂。但往往因为过分专注职务，而忽略身边的家人及朋友，是个宁要面包不需要爱情的理性主义者。"
    ]
  }
}

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

App.vue

<script setup>
import { ref } from 'vue'
import axios from 'axios'

//appKey的值
const appKey = 'D8408fA96e19499E921381fF1bC64dB8'

//查询的手机号码
const mobile = ref('17702113246')

//记录手机号码吉凶状况
const mobileState = ref('')

//获取手机号码吉凶状况
function getMobileState() {
  
  //请求地址（已处理跨域），注意字符串中使用变量要用模板字符串  
  const url = `/api/1617-1?appKey=${appKey}` 
  //表单数据需要进行URL编码
  const formData = new URLSearchParams();
  formData.append('mobile',mobile.value)  
  //发送请求
  axios.post(url, formData,{
    //请求头
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }).then(response => {    
    const responseData = response.data.showapi_res_body  //获取服务器响应的数据    
    if(responseData.ret_code === '0') {
      //请求成功
      mobileState.value = responseData.expList      
    } else {
      //请求失败
      alert(responseData.remark)
    }
  }).catch(error => {
    alert('服务器异常')
  })
}
</script>

<!-- 视图区域（view） -->
<template>
  手机号码：<input type="text" v-model="mobile">
  <button @click="getMobileState">获取手机号码吉凶</button>

  <hr>

  <ul v-if="mobileState">
    <li v-for="item in mobileState">{{ item }}</li>
  </ul>
</template>
<style>
 
</style>