axios的学习

axios是什么？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

它会自动判断当前环境是什么，如果是浏览器，就会基于XMLHttpRequests实现axios。如果是node.js环境，就会基于node内置核心模块http实现axios。

现在vue推荐使用axios。

axios的基本原理

axios还是属于 XMLHttpRequest的， 因此需要实现一个ajax。或者基于http 。 还需要一个promise对象来对结果进行处理

axios有什么特性？

1、从浏览器中创建 XMLHttpRequests

2、创建 http 请求 

3、支持 Promise API 

4、拦截请求和响应转换请求数据和响应数据 

5、取消请求 

6、自动转换JSON 数据 

7、客户端支持防御 XSRF

axios的使用

axios的引入

import axios from 'axios';

安装使用的3种方法

npm install axios

bower install axios 

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

请求方式

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的一些配置

全局配置

{
  //请求的接口，在请求的时候，如axios.get(url,config);这里的url会覆盖掉config中的url
  url: '/user',

  // 请求方法同上
  method: 'get', // default
  // 基础url前缀
  baseURL: 'https://some-domain.com/api/',　　　　　　
  transformRequest: [function (data) {
    // 这里可以在发送请求之前对请求数据做处理，比如form-data格式化等，这里可以使用开头引入的Qs（这个模块在安装axios的时候就已经安装了，不需要另外安装）
　　data = Qs.stringify({});
    return data;
  }],

  transformResponse: [function (data) {
    // 这里提前处理返回的数据

    return data;
  }],

  // 请求头信息
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //parameter参数
  params: {
    ID: 12345
  },

  //post参数，使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象，否则会报错
  data: {
    firstName: 'Fred'
  },

  //设置超时时间
  timeout: 1000,
  //返回数据类型
  responseType: 'json', // default

}

上面是全局配置还可以自己配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//当然还可以这么配置
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

axios基本使用方式

axios(config)
axios.method(url, data , config)

 document.querySelector('.btn').onclick = function() { 
        // 分别使用以下方法调用，查看myaxios的效果 
        axios.post('/postAxios', { 
          name: '小美post' 
        }).then(res => { 
          console.log('postAxios 成功响应', res); 
        }) 

 axios.get('http://localhost:5000/getTest').then(res => { 
          console.log('getAxios 成功响应', res); 
        }) 
        // axios({ 
        //   method: 'get', 
        //   url: 'http://localhost:5000/getTest' 
        // }).then(res => { 
        //   console.log('getAxios 成功响应', res); 
        // }) 
    } 

        axios({ 
          method: 'post', 
          url: '/getAxios' 
        }).then(res => { 
          console.log('getAxios 成功响应', res); 
        }) 
    }

拦截器

拦截器就是在我们发送一个请求的时候会先执行请求拦截器的代码，然后再真正地执行我们发送的请求，这个过程会对config，也就是我们发送请求时传送的参数进行一些操作。

而当接收响应的时候，会先执行响应拦截器的代码，然后再把响应的数据返回来，这个过程会对response，也就是响应的数据进行一系列操作。

实现方法

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

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

简单基本的服务器配置

var express = require('express'); 
var app = express(); 

//设置允许跨域访问该服务. 
app.all('*', function (req, res, next) { 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type'); 
    res.header('Access-Control-Allow-Methods', '*'); 
    res.header('Content-Type', 'application/json;charset=utf-8'); 
    next(); 
}); 

app.get('/getTest', function(request, response){ 
    data = { 
        'boy':'fxq', 
        'girl':'zah' 
    }; 
    response.json(data); 
}); 
var server = app.listen(5000, function(){ 
    console.log("服务器启动"); 
}); 

总结

axios拥有promise的所有方法比如all，rice等

如果其中发现有错误望指出，感谢！