axios

axios

axios的使用

1. import axios from 'axios'
   
   # 1.用，默认情况下，就是get请求
   axios({
       //这东西本身返回的是一个Promise
       url: 'http://123.207.32.32:8000/home/multidata',
      // method: 'get'
   }).then(res =>{
       console.log(res);
   })
   
   axios({
       url: 'http://123.207.32.32:8000/home/data',
       //专门针对get请求的参数拼接
       params: {
           type: 'pop',
           page: 1
       }
   }).then(res =>{
       console.log(res);
   })
   
   
   

2. #2.axios发送并发请求
   axios.all([axios({
       url: 'http://123.207.32.32:8000/home/multidata'
   }), axios({
       url: 'http://123.207.32.32:8000/home/data',
       params: {
           type: 'sell',
           page: 5
       }
   })])
       .then(results =>{
       console.log(results)
   })
   #返回两个结果
   axios.all([axios({
       url: 'http://123.207.32.32:8000/home/multidata'
   }), axios({
       url: 'http://123.207.32.32:8000/home/data',
       params: {
           type: 'sell',
           page: 5
       }
   })])
       .then(axios.spread((res1, res2) =>{
           console.log(res1)
        	console.log(res2)
   }))
   

3. axios的全局配置

   #开发中，很多参数都是固定的，这个时候我们可以利用axios的全局配置
   
   #使用全局的axios和对应的配置进行网络请求
   axios.defaults.baseURL = '127.0.0.1'
   axios.defaults.headers.post['COntent-Type'] = 'application/x...'
   axios.defaults.timeout = 5000
   

   

4. axios的实例:

   #如果配置不一样，就创建不同的实例
   
   //创建对应的axios的实例
   const instance1 = axios.create({
       baseURL: 'http://127.0.0.1:9090',
       timeout: 5000
   })
   
   //使用实例：
   instance1({
       url: '/home/multidata'
   }).then(res =>{
       console.log(res)
   })
   instance1({
       url: '/category'
   	params: {
       	type: 'pop',
       	page: 1
   	}
   }).then(res =>{
       console.log(res)
   })
   
   const instance2 = axios.create({
       baseURL: 'http://127.0.0.1:8080',
   	timeout: 10000,
       headers: {
           
       }
   })
   

5. axios模块封装：

   import axios from 'axios'
   
   export function request(config){
       //1.创建axios的实例
       const instance = axios.createa({
           baseURL: 'http://127.0.0.1:8080',
           timeout: 5000
       })
       
       //2.发送真正的网络请求
       instance(config)
           .then(res =>{
           	console.log(res)
       	})
       	.catch(err =>{
   	    	console.log(err)    
       	})
   }
   # 上面的代码，请求之后没有回调出去，需要改成：👇
   # 方式1：使用回调的方式
   export function request(config, success, failure){
       //1.创建axios的实例
       const instance = axios.createa({
           baseURL: 'http://127.0.0.1:8080',
           timeout: 5000
       })
       
       //2.发送真正的网络请求
       instance(config)
           .then(res =>{
           	console.log(res)
           	success(res)
       	})
       	.catch(err =>{
   	    	console.log(err)  
           	failure(err)
       	})
   }
   别人用，就直接这样使用：
   request({
       url: '/home/multidata'
   }, res =>{
       console.log(res)
   }, res1 =>{
       console.log(err)
   })
   
   #方式2：config中要求传success, failure, baseConfig
   export function request(config){
       const instance = axios.createa({
           baseURL: 'http://127.0.0.1:8080',
           timeout: 5000
       })
       
           .then(res =>{
           	console.log(res)
           	config.success(res)
       	})
       	.catch(err =>{
   	    	console.log(err)  
           	config.failure(err)
       	})
   }
   
   request({
      baseConfig: {
          
      },
      success: function(res){
      	 console.log(res)
      },
      failure: function(err){
       console.log(err)
      }    
   })
   
   #方式3： Promise
   export function request(config){
   	return new Promise((resolve, reject) =>{
           //1.创建axios的实例
           const instance = axios.createa({
               baseURL: 'http://127.0.0.1:8080',
               timeout: 5000
           })
   
           //2.发送真正的网络请求
           instance(config)
               .then(res =>{
   				resolve(res)
           	})
               .catch(err =>{
                   reject(err)
               })
       })
   }
   使用： 
   request({
       url: '/home/multidata',
   }).then(res =>{
       console.log(res)
   }).catch(err =>{
       console.log(err)
   })
   
   #方案4： 最佳方案，return
   export function request(config){
           const instance = axios.createa({
               baseURL: 'http://127.0.0.1:8080',
               timeout: 5000
           })
   		return instance(config)
   }
   

6. axios拦截器：

   axios拦截器,用于在发送每次请求或者得到响应后，进行对应的处理。
   #请求成功，请求失败， 响应成功，响应失败
   
   export function request(config){
       	//1.创建axios的实例
           const instance = axios.createa({
               baseURL: 'http://127.0.0.1:8080',
               timeout: 5000
           })
           //2.1.axios的拦截器
           instance.interceptors.request.use(config =>{
               //请求成功来到这, 拦截之后，需要把config返回出去
               console.log(config)
               //拦截之后，我们一般做如下处理：
               //1.比如config中的一些信息不符合服务器的要求
               //2.比如每次发送网络请求时，都希望在界面中显示加载的图标
               //3.某些网络请求，如登录，需要token 
               return config
           }, err =>{
               console.log(err)
               //请求失败来到这
           });
       	
       	//2.2.响应拦截
       	instance.interceptors.response.use(res =>{
               console.log(res)
               return res
           }, err =>{
               console.log(err)
           });
           
           //3.发送真正的网络请求
   		return instance(config)
   }