Vue安装并使用axios发送请求

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言 本文主要介绍的是使用在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>

通过控制台，发现正常请求到了数据