封装Axios网络请求

Axios 是目前应用最为广泛的 AJAX 封装库

Axios的特性有：

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

使用axios时，需要通过使用script标签引入：https://unpkg.com/axios/dist/axios.min.js

Axios API

• 向axios（）传递相关配置来创建请求；
• axios（对象格式的配置选项）
• axios（url，config）
• 常用的配置项
• url：用于请求的服务器URL
• method：创建请求时使用的方法
• baseURL：传递相对URL前缀，将自动加在url前面
• headers：即将被发送的自定义请求头
• params：即将与请求一起发送的URL参数
• data：作为请求主体被发送的数据
• timeout：指定请求超时的毫秒数（0表示无超时时间）
• responseType：表示服务器响应的数据类型，默认“json”
• axios（）.then(function(response){  //正常请求的响应信息对象response })
• .catch(function(error){  //捕获的错误 })

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 //使用axios方法    post请求
axios({
         url:"/pinglun",
         method:"post",
         baseURL:"http://localhost:3000",
         header:{
               "Content-Type":"application/json"
         },
        data:{
            "content":"well",
            "lyId":4
         },
    timeout:1000,
  }).then(function(res){
       console.log(res.data);
   }).catch(function(error){
       console.log(error);
})
 </script>

axios 全局默认值的配置

axios.defaults.baseURL = ‘https://xxx.xxx.com’;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencode’
axios拦截器：在请求或响应被then或catch处理前拦截它们
axios 的请求拦截器

//axios 的请求拦截器
axios.interceptors.request.use(function(config){
 //配置项config
  config.params = {
        id:2 //对配置项中的params进行更改，筛选id=2
    }
   return config;//要有返回值
})
    
//axios 方法
axios("http://localhost:3000/liuyan")
.then(function(res){
      console.log(res.data);
 })
.catch(function(error){
      console.log(error);
})
    
//axios 方法
axios("http://localhost:3000/pinglun")
.then(function (res) {
    console.log(res.data);
})
.catch(function (error) {
     console.log(error);
})
//多个axios方法也可以拦截

axios 的响应拦截器

//axios 的响应拦截器
axios.interceptors.response.use(function(response){
     return(response.data);//response里有很多值，选择data即可
})
    
//axios 方法
axios("http://localhost:3000/liuyan")
.then(function (res) {
      console.log(res);//response那里拦截了，已经将数据传成data了
})
.catch(function (error) {
     console.log(error);
})

axios的快速请求方法

• axios.get(url[,config])

//axios.get(url[,config])
    
axios.get("http://localhost:3000/liuyan?id=2")
 .then(function(res){
     console.log(res.data);
})
    
axios.get("http://localhost:3000/liuyan",{
   params:{
        id:1
   }
}).then(function(res){
    console.log(res.data);
})

• axios.post(url[,data[,config]])

//axios.post(url[,data[,config]]) , post请求，添加数据
axios.post("http://localhost:3000/users",{
    name:"laowang",
    age:23,
    class:1
})