axios框架的使用 （网络请求相关）

1、特点

• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 能转换请求和响应数据
• 能取消请求
• 自动转换JSON数据
• 浏览器端支持防止CSRF(跨站请求伪造)

2、安装

用npm：

npm install axios

 用 bower：

bower install axios

 用cdn：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 3、使用

<script>
// 1、axios的基本使用（默认请求是get）
axios({
    url:'http://127.0.0.1:8000/home/muitls/',
    // method: 'get',
}).then(res => {
    console.log(res.data)
})

// 请求的参数拼接
axios({
    url: 'http://127.0.0.1:8000/home/?gid=' + this.god_id
}).then(res => {
    console.log(res.data)
})

// 写法一
axios({
    url: 'http://127.0.0.1:8000/home/data/',
    // 专门针对get请求的参数拼接
    params:{
        'type': pop,
        'page': 1
    }
}).then(res => {
    console.log(res.data)
})

//写法二
axios.get("http://127.0.0.1:8000/home/multidata",{
    params:{
        type: 'pop',
        page: 1
    }
}).then(res => {
    console.log(Res.data)
}).catch(err => {
    console.log(err)
})

// post请求
axios.post("http://127.0.0.1:8000/home/multidate",{
    firstName: 'Fred',
    lastName: 'Flintstone'
}).then(res => {
    console.log(res)
})

axios({
    url: '/adv/login/',
    method:'post',  // 需要指定请求参数
    data: {  // 注意get请求是params
        username: 'lan',
        password: '123'
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

// 3、axios发送并发请求
axios.all([axios({
    url: 'http://127.0.0.1:8000/home/multidata'
}),axios({
    url: 'http://127.0.0.1:8000/home/data',
    params:{
        type: 'sell',
        page: 5
    }
})]).then(res => {
    console.log(res)
})

//展示结果 axios.spread()
axios.all([axios({
    url: 'http://127.0.0.1:8000/home/multidata'
}),axios({
    url: 'http://127.0.0.1:8000/home/data',
    params:{
        type: 'sell',
        page: 5
    }
})]).then(axios.spread((res1,res2) => {
    console.log(res1);
    console.log(res2)
}))
</script>

 4、配置信息相关

<script>
// 使用全局的axios和对应的配置进行网络请求
axios.defaults.baseURL = 'http://127.0.0.1:8000/'
axios.defaults.timeout = 5000

axios.all([axios({
  url:'home/multidata'
}),axios({
  url:'home/data',
  params:{
    type:'sell',
    page:5
  }
})]).then(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))
</script>

5、常见的配置选项

 项目前景（模块化封装）：在项目开发中，当我们在不同的页面中需要请求数据时可能会这样做，但是这样的话，每个请求的页面都需要引入axios框架，当axios框架不在维护或者有重大bug时，需要修改替换成例外的框架。这时会发现需要在每个页面都修改，这样太费劲了。

 

6、封装request模块 

在src目录下新建network文件夹，然后在该文件夹里新建一个request.js

(注：页面中不需要在引入axios框架啦！)

7、axios请求拦截器和响应拦截器

axios里面可以设置拦截器 ，在请求发送之前做一些事情；
拦截器分【请求拦截器】和【响应拦截器】
参考地址：https://www.jb51.net/article/150014.htm
参考的地址：https://www.jianshu.com/p/7bc7654d4574

请求拦截器的实际应用场景
在进行鉴权的时候；我们每个接口都需要携带token;
难道每次我们都需要手动拼接token;
这个时候拦截器就很有用了；
这时候就可以用拦截器来使token自动增加


// 首先我们看下请求拦截器的写法;在请求或响应被 then 或 catch 处理前拦截它们。
<script>
axios.interceptors.request.use(（config)=>{
	console.log("--",config);
	config.baseURL="http://127.0.0.1:8000/";
	
                if (token) {  // 判断是否存在token，如果存在的话，
                              //则每个http header都加上token
                     config.headers.myAuthorization = mytoken；
	            //　config.headers['Authorization'] = token;
                } 
	       if(!config.hasOwnProperty('showError')){
	            config.showError = true
               }
	return config;
},(err)=>{
    console.log(error)
     // 发生错误做的一些事情
      return Promise.reject(error);
})



// 添加响应拦截器
axios.interceptors.response.use(function (res) {
  // 对响应数据做点什么
   if (res&&res.data&&res.data.success) {
                return  res.data
   }else{
	if(res.config.showError) {
                  //如何请求失败，开启了错误提示；进行提示
                    window.$toast(res.data.msg)
                }
                return Promise.reject(res.data)
  }}, function (error) {
     // 对响应错误做点什么;没有权限401，去登录界面
     if(error.response.status === 401) {
            window.$toast('登录超时')
            setTimeout(() => {
                uni.switchTab({  
                    url: '/pages/home/home'
                })
            },1000)
        }else if(error.response.status === 403) {
            window.$toast('暂无权限')
        }else {
            window.$toast('网络错误')
        }

  return Promise.reject(error);
 });

export default axios
</script>

 8、使用

<script>
import request from './common'
/** 
{请求参数} data   
@param {
showError: 是否隐藏错误提醒
 } utils 
*/


export function getUserInfo(data, utils) {
	return request({
		url: 'xxx/xx/user',
		method: 'get',
		data,
		...utils
	})
}
</script>