在vue中使用axios访问API

axios是一个基于Promise的，发送http请求的工具库

一、特点：

• 从浏览器中创建 XMLHttpRequests（和原生的Ajax相同都是基于XMLHttpRequest（）对象的二次封装）
• 从 node.js 创建 http 请求（可以在Node环境中配合Express()使用实现异步的数据交互）
• 支持 Promise API（Axios是基于Promise()对象进行的二次封装，完美支持Promise()对象的所有Api是让异步的数据交互变得更加简单，方便）
• .拦截请求和响应
  1）拦截请求：可以过滤请求参数
  2）拦截响应：可以处理响应异常
• 转换请求数据和响应数据（相比fetch（）axios最强大的就是自己完成了请求和相应数据之间的转换，大大减少开发者的工作量）
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF
  二、axios再vue中的基本使用

1.安装axios

npm install --save axios

2.引入axios

• 方式1-----在需要请求数据的页面导入axios

import axios from "axios"

• 方式2-----在入口文件中引入（便可以全局使用）

import axios from ‘axios’
new Vue({
	//el:'#app'
	//router
	axios

})

3.基本API

1）执行get请求，有3种方式

• 方式1----将参数直接写在url中，比如在methods中定义get请求数据的方法（axios以对象的形式使用）

methods：{
	getInfo(){
		let url="/getInfo?id=123"   /*举例*/
		axios.get(url)
		.then(res=>{
			//console.log(res)
			this.info=res //要看具体请求回来的数据
		})
		.catch((err)=>{
			console.log(err);
		})
	}
}

• 方式2—将参数写在params中（axios以对象的形式使用）

methods：{
	getInfo(){
		/*传在get()的第二个参数是对象形式，也相当于在里面进行相关配置。这里只配置了params属性相关
			{
				params:{
					id:123
					}
			}

		*/
		let url="/getInfo"   /*举例*/
		axios.get(url,{params:{id:123}})
		.then(res=>{
			//console.log(res)
			this.info=res //要看具体请求回来的数据
		})
		.catch((err)=>{
			console.log(err);
		})
	}
}

• 方式3--------将axios以函数的形式使用

this.$axios({
		method: 'get',
		url: '/goods.json',
    	params: {
            id:1
        }
	}).then(res=>{
		console.log(res.data);
	},err=>{
		console.log(err);
	})

• .在生命周期函数中调用以下，一般异步请求的数据请求使用的生命周期函数为Mounted（此时数据以及渲染完成）

mounted(){
	this.getInfo()
}

• 经过以上四个步骤，就完成了axios的get请求方法

2）下面简单说一下post请求，执行post请求，注意执行post请求的入参，不需要写在params字段中，这个地方要注意与get请求的第二种方式进行区别。

axios.post('/getMainInfo', {
  id: 123
})
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})

4.下面是axios传递的相关配置来创建axios
常用的配置字段如下：

• url：请求路径，String类型
• methods：请求方法，String类型
• baseURL：baseURL会自动架子啊url前面，除非url是一个绝对URL，String类型
• header：自定义请求头
• params：请求一起发送的url参数（一般只用于get请求）一般是对象类型
• data：作为请求主体被发送的数据（一般只用于post请求）一般是对象类型
• timeout：超出时间，请求将被终端
• withCredentials：表示跨域请求时是否需要使用凭证
• responseType：响应数据类型，默认是josn，可以是text、josn、document、arrayvuffer等
• proxy：代理服务器主机名称端口（如下）

proxy: {
  host: '127.0.0.1',
  port: 9000,
  auth: : {
    username: 'mikeymike',
    password: 'rapunz3l'
  }
},

4）响应的数据接口

{
	data：//服务器响应数据
	status：//http状态码
	statusText：//服务器响应的http状态信息
	headers：//响应头
	config：//请求配置数据
}

5）举例

// 发送 POST 请求
axios({
  method: 'post',
  url: '/getMainInfo',
  data: {
    id: 123
  }
}).then(res => {
  /*下面是将所有响应数据都打印出来*/
  console.log(res.data)
  console.log(res.status)
  console.log(res.statusText)
  console.log(res.headers)
  console.log(res.config)
}).catch(err => {
  console.log(err)
})

5.配置默认值default

axios.default.baseURL = ''
axios.default.headers.common['Authorization'] = AUTH_TOKEN
...等等默认配置

6.执行多个并发
axios.all()与Promise.all()执行机制是一样的，要么全部成功走then，要么走catch

function getUserName() {
  return axios.get('/getUseName?id=123')
}
function getUserAge() {
  return axios.get('getUserAge?id=123')
}
axios.all([getUserName(),getUserAge()])
.then(
	axios.spread(function(acct,perms) {
		console.log(acct,permd)
	})
).catch(err=>{
	console.log(err);
}

axios.all([
	axios.get('/goods.json'),
	axios.get('/classify.json')
]).then(
	axios.spread((goodsRes,classifyRes)=>{
		console.log(goodsRes.data);
		console.log(classifyRes.data);
	})
)

7.拦截器
1）在请求之间拦截

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
})

2）在被then，catch处理前拦截响应

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

8.封装axios
在时间开发中，总会有恨锁http请求，那我们就要封装好一个axios，使用更方便一些
1）封装

• 新建一request.js文件

// request.js文件
import axios from 'axios'
import qs from 'qs'
// 引入基础参数文件  和  baseURL配置文件
import baseParams from './baseParams'  // 基本参数，比如一些登录信息之类的参数
import { BASE_URL } from './config'   // baseURL写在config.js文件中
// 默认的全局配置
axios.defaults.baseURL = BASE_URL
axios.defaults.timeout = 10000
// 请求发送之前拦截，进行处理（根据业务需求进行拦截处理）
axios.interceptors.request.use(success => {
  return success
}, error => {
  return reject(error)
})
// then,catch处理之前，进行拦截处理（根据业务需求进行拦截处理）
axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.reject(error)
})
// 导出post请求
export function post (url, data, withBaseParams = false) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'post',
      url,
      data: withBaseParams ? qs.stringify({...baseParams, data}) : qs.stringify(data),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    })
      .then(res => successHandle(res, resolve))   // 将数据处理之后传给页面
      .catch(err => errorHandle(err, reject))
  })
}
// 导出get请求
export function get (url, params) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url,
      params,
      headers: {}
    })
      .then(res => successHandle(res, resolve))
      .catch(err => errorHandle(err, reject))
  })
}
// then处理执行了successHandle
function successHandle(data, resolve) {
  if (res.success && res.errorCode == '60000') {
    resolve(res)
  } else {
    // 弹出toast报错
    Toast({
      message: res.msg,
      duration: 2000
    })
  }
}
// catch处理执行了errorHandle
function errorHandle(err, reject) {
  reject(err)
}

2）引入使用

// 引入使用
import {get, post} from 'request.js'
post('/getMainInfo', {id: 123}, true)
.then(res => {
  console.log(res)
})
.catch(err => {
  console.log(err)  
})