vue学习笔记之axios网络请求

988axiox请求方式
axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
现在展示使用axios(config) （默认是get方式）

		axios({
		  url: 'http://123.207.32.32:8000/home/multidata',   //路径
		}).then(res =>{
		  console.log(res);

然后axios.get(url[, config])和axios.post(url[, data[, config]]) ，只需要增加一段method代码并且如果有参数，可以把参数写出来、

		axios({
	  url: 'http://123.207.32.32:8000/home/data?type=pop&page=1',
	  method: post,    //方式
	  // param: {     //也可以把参数提取出来
	  //   type: 'pop',
	  //   page: 1
	  // }
	}).then(res =>{
	  console.log(res);
	})

处理并发请求
使用axios.all, 可以放入多个请求的数组.
axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
代码演示，发送并发请求，并且当所有请求都成功的情况下

	axios.all([
	  axios({
	    url: 'http://123.207.32.32:8000/home/multidata'
	  }),
	  axios({
	    url: 'http://123.207.32.32:8000/home/data?type=pop&page=1',
	    method: post,
	    // param: {
	    //   type: 'pop',
	    //   page: 1
	    // }
	  })
	]).then(res =>{
	  console.log(res);
	  console.log(res[0]);   //返回的是数组
	  console.log(res[1]);
	})

上面的网络请求返回的结果是放进一整个数组里，现在可以使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2，方便使用

	axios.all([
	  axios({
	    url: 'http://123.207.32.32:8000/home/multidata'
	  }),
	  axios({
	    url: 'http://123.207.32.32:8000/home/data?type=pop&page=1',
	    method: post,
	    // param: {
	    //   type: 'pop',
	    //   page: 1
	    // }
	  })
	])..then(axios.spread(res1 , res2) =>{
		  console.log(res1);
		  console.log(res2);
		})

定义全局的配置
把获取的域名定义为全局配置，使用的时候就直接用后面的接口

axios.default.baseURL = 'http://123.207.32.32:8000'
axios.default.timeout = 5000   //加载时长，超过报错
	axios.all([
	  axios({
	    url: '/home/multidata'
	  }),

axios实例
如果由多个服务器请求，或者要设置不同的配置，那么全局配置就显得麻烦和不够用，于是axios实例就出现了，它的作用就是创建axios实例，然后实例里定义好配置，然后再配置内设置发送请求，如代码

//创建实例
const installce1 = axios.create({
	baseURL = 'http://123.207.32.32:8000'
	timeout = 5000
})
//使用实例
installce1（{
	 url: '/home/multidata'
}）
//创建实例2
	const installce2 = axios.create({
	baseURL = 'http://123.207.32.33:8000'
	timeout = 10000
})
installce2（{
	 url: '/home/data'
}）

axios模块封装与正确使用
然后我们来使用axios，然而并不是说每一个组件需要发送网络请求，每一个组件都使用axios，这样是不好的，因为如果我们使用这个网络请求框架需要更改时，由于太多内容与它相依赖的时候，修改起来就会非常复杂，所以需要对网络请求进行封装
那如何封装呢，就把使用框架来发送网络请求的东西封装起来，当改变了框架的时候，就改变这个封装的东西就可以了，一般我们封装创建一个文件夹叫network

然后再里面创一个请求的request.js
request.js中

		export function request(config, success, failure) {
	    // 1.创建axios的实例
	    const instance = axios.create({
	      baseURL: 'http://123.207.32.32:8000',
	      timeout: 5000
	    })
	
	    // 发送真正的网络请求
	    instance(config)
	      .then(res => {
	        // console.log(res);
	        success(res);   //这里就是把从网络请求到的数据传出去，这里是回调函数的作用
	      })
	      .catch(err => {
	        // console.log(err);
	        failure(err)
	      })
	  }

然后再外面使用这个request的时候是这样使用的，下面这里调用request这个方法，然后传进去的第一个参数是接口url:"/home/multdata" 发送网络 请求，然后成功请求后调用 success(res); 方法并且把请求回来的值传到这个方法里面，然后下面调用request方法传进去的第二个参数就是 success方法体，方法体就可以使用数据，以这样回调的方式传输数据
使用

import {request} from './network/request.js'
request({
	url:"/home/multdata"	
},res => {
	console.log(res)
},err => {
	console.log(err)
}	
)

或者以下面这种更好看同样使用回调的方法
request.js

  export function request(config) {   //我们把参数都放进config数组里面
// 1.创建axios的实例
const instance = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})

// 发送真正的网络请求
instance(config.baseConfig)
  .then(res => {
    // console.log(res);
    config.success(res);     //我们把参数都放进config数组里面
  })
  .catch(err => {
    // console.log(err);
    config.failure(err)      //我们把参数都放进config数组里面
  })

}

外面使用

import {request} from './network/request.js'
request({
	baseConfig:"/home/multdata"	
},
success: function(res){

}
failure: funciton(err){

}
)

但上面的方法都不是最后的方案，下面才是最后的方案
request.js中，这看代码，这样运行request这个方法，返回Promise，然后Promise返回的是网络请求到的值
request.js中

			 export function request(config) {
		    return new Promise((resolve, reject) => {   
		      // 1.创建axios的实例
		      const instance = axios.create({
		        baseURL: 'http://123.207.32.32:8000',
		        timeout: 5000
		      })
		      // 发送真正的网络请求
		      instance(config)  //这个返回Promise
		        .then(res => {
		          resolve(res)   //成功执行这个方法，并传参
		        })
		        .catch(err => {
		          reject(err)
		        })
		    })
		  }

然后使用方法request
使用

		import {request} from './network/request.js'
		request({
		url:"/home/multdata"	
		}）.then( res =>{     //上面request方法执行，然后执行成功或者失败的方法，并且把值传出来，这里接受
			console.log(res);
		}）.catch(err{
			console.log(err);
		}
		)

但还不是最后的方案，为什么呢，因为再上面的request.js中的，执行 instance 后面可以带有.then和catch，因为这个方法执行其实返回一个promise
request.js中

			      instance(config) 
		        .then(res => {
		          resolve(res)   
		        })
		        .catch(err => {
		          reject(err)
		        })
		    })

所以我们最后的方案就是request.js

				 export function request(config) {
		    return new Promise((resolve, reject) => {   
		      const instance = axios.create({
		        baseURL: 'http://123.207.32.32:8000',
		        timeout: 5000
		      })
		      // 发送真正的网络请求
		    return    instance(config)  //直接return 它，因为本来它就是返回一个promise，所以他们传递的参数，就是网络请求回来的值
		    })
		  }

上面就是基于框架的网络请求封装，如果这个框架突然不能用了，只需要修改request.js文件就可以了，就如何？
首先把导入的框架包换掉，然后把新的框架代码放进new Promise，然后最后request还是返回Promise，

			 export function request(config) {
		    return new Promise((resolve, reject) => {   
				新框架的代码
		    })
		  }

然后使用的时候，还是那些网络请求代码
使用

		import {request} from './network/request.js'
		request({
		url:"/home/multdata"	
		}）.then( res =>{     //上面request方法执行，然后执行成功或者失败的方法，并且把值传出来，这里接受
			console.log(res);
		}）.catch(err{
			console.log(err);
		}
		)

如何使用拦截器？
意思就是把请求拦截下来
请求拦截器的使用
request.js文件中

	export function request(config) {
	  return new Promise((resolve, reject) => {
	    const instance = axios.create({
	      baseURL: 'http://123.207.32.32:8000',  //配置信息
	      timeout: 5000
	    })
	    //拦截器的使用
	    instance.interceptors.request.use(   //这里使用拦截器
	      aaa =>{     //这里是请求成功后，拦截下来的数据
	        console.log(aaa); 
	        return aaa      //拦截下来后必须把数据再返回回去，再外面调用request方法的，才能收的到请求返回的数据
	      },err => {   //这里是请求失败，就是发送都没发送出去
	      console.log(err);
	    }
	    )
	    // 发送真正的网络请求
	    return instance(config)	

那什么使用请求拦截器呢
1、对于配置信息需要更改
2、网络请求过程中防止也页面空白，可以弄一个动画，再请求过程中展示动画，请求完成关闭动画
3、比如登陆，如果登陆没有完成完成要求，给它错误信息，让它重新登陆，重新完成请求

响应拦截
再进行网络请求后，服务器对请求做出响应，传输数据回来这个过程中，把数据拦截下来

	instance.interceptors.response.use(
      res =>{
        console.log(res);
        return res.data  //这里设置返回data。
      },err => {
        console.log(err);
      })

下图中的返回的是res，但像上面代码设置返回data就会只返回下面图的data