Vue 安装并使用 axios 发送请求

作者：不觉心动

2023-06-08
北京
本文字数：1205 字
阅读完需：约 4 分钟

前言本文主要介绍的是使用在 Vue 项目中安装并使用 axios 发送请求

axios 介绍 axios 是一种 Web 数据交互方式

它是一个基于 promise 的网络请求库，作用于 node.js 和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和 node.js 中)

本质是对原生 XHRXMLHttpRequest)进行封装，只不过它是 Promise 的实现版本，符合最新的 ES 规范，相比于 JQuery，它体积更小，只有前者的四分之一左右，并且 axios 支持拦截器和各种请求

axios 在 vue 项目中用的特别多，就连 vue 的作者尤雨溪也曾经公开表示，建议大家在 vue 项目中多多使用 axios 进行通信

安装安装方式有很多种，这里我以 npm 举例使用 npm:

1 使用 bower:

$ npm install axios

复制代码

1 使用 yarn:

$ bower install axios

复制代码

$ yarn add axios

复制代码

1 使用 jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

复制代码

1 使用 unpkg CDN:

1 安装 axios 过程十分简单，打开终端，输入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

复制代码

npm i axios

复制代码

这个库非常的小，安装很快

安装成功后会在项目的 node_modules 里面多出来一个叫 axios 的目录

引用

下载完毕之后，就可以引用了

import axios from 'axios'

复制代码

简单实际运用

安装并且引入完毕之后，就可以编写 axios 基本的请求了

这里我是请求了一个 github 开源的接口，是 get 请求，参数是我自己传的，原接口为：

> https://api.github.com/search/users?q=xxx

复制代码


<template>  <div>    <section class="jumbotron">    <h3 class="jumbotron-heading">Search Github Users</h3>    <div>      <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;      <button @click="searchUsers">Search</button>    </div>  </section>  </div></template>
<script>  import axios from 'axios'  export default {    name:'Search',    data() {      return {        // input框输入内容        keyWord:'',      }    },    methods: {      searchUsers(){          // 使用axios发送请求(get) 发送请求后会有两个回调                    axios.get('https://api.github.com/search/users?q='+this.keyWord).then(                        // 成功回调                        success=>{                            console.log('请求成功！')                            // 请求成功后的数据                            console.log(success.data)                        },                        // 失败回调                        error=>{                                console.log('请求失败！')                            // 请求失败原因                            console.log(error.message)                        }                    )             }    },  }</script>