Vue学习--Vue项目中使用axios调用后端接口

---

前言

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
它的主要特性包括：

1. 从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持防御 XSRF

一、axios的安装

使用 npm:
$ npm install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、使用axios封装工具类utils/request.js

1. 在项目的src->utils新建request.js
2. 在request.js文件中添加

   import axios from 'axios'
   import 其他需要的
   // import { Message, Notification, Loading } from 'element-ui'
   // import store from '@/store'
   // import { getToken } from '@/utils/auth'
   
   // 创建axios实例
   const service = axios.create({
   	// baseURL将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
   	baseURL: '',  // url = base url + request url 
   	headers: '', // 请求头
   	data: {}, //参数
   	...
   	})
   // 添加请求拦截器
   service.interceptors.request.use(
   	config => {
   	   // 在发出请求前做点什么
   	   ...
   	   return config
   	},
   	error => {
   	   // 处理请求错误
   	   console.log(error) // for debug
   	})
   // 添加响应拦截器.
   
   service.interceptors.response.use(
   	response => {
   	// 对响应数据做点什么
   		console.log(response);	 
   	},
   	error => {
   	// 对响应错误做点什么
   		return Promise.reject(error);
   	})	
   

三、在api.js中调用工具类请求接口数据

1. 在项目的src->api新建api.js
2. 在api.js文件中添加

	import request form '@/utils/request'	
	//获取xx数据列表
	//1.get方法
	export function 函数名(params){
		return request({
			url:'',
			method:'get',
			params
		})
	}
	//2.post方法
	export function 函数名(data){
		return request({
			url:'',
			method:'post',
			data
		})
	}
	//导出方法
	exoprt default{
		函数名
	}

四、将所有结构挂载到$api对象上

1. 在项目的src->api新建index.js
2. 在index.js文件中添加

// 导入所有接口
	import apiList from './api'
	const install = Vue => {
	  if (install.installed) {
	    return
	  }
	  install.installed = true
	Object.defineProperties(Vue.prototype, {
	   // 注意哦，此处挂载在 Vue 原型的 $api 对象上
	   $api: {
	     get() {
	       return apiList
	    }
	  },
	 })
	}
	export default install

五、 在页面中调用

	函数名(){
		this.$api.(api.js中对应的函数名)({
			传入参数
		})
		.then((re) => {
			this.xxxdata = re.Result;
		})
		.catch(() => {});
	}
	// this.xxxdata中即保存了接口数据