axios发送请求的方法以及参数的传递

综合性的发起请求、

axios({
 method: '请求类型',
 url: '请求的URL地址',
 data: { /* POST数据 */ },
 params: { /* GET参数 */ }
}).then(callback)

单独get

axios.get('url', { params: { /*参数*/ } }).then(callback)

// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 请求的参数对象
var paramsObj = { name: 'zs', age: 20 }
// 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
})

单独的post

// 这是通过选型传递比较常用
axios.post('url', { /*参数*/ }).then(callback)

// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/post'
// 要提交到服务器的数据
var dataObj = { location: '北京', address: '顺义' }
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
})

// 第二种
// # 4.2  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

delete

	// #3 axios delete 请求传参     传参的形式和 get 请求一样
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

put

	// #5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

全局的配置

// #  配置公共的请求头 
axios.defaults.baseURL = 'https://api.example.com';
// #  配置 超时时间
axios.defaults.timeout = 2500;
// #  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// # 配置公共的 post 的 Content-Type
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

拦截器

	// # 1. 请求拦截器 
	axios.interceptors.request.use(function(config) {
      console.log(config.url)
     // # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
      config.headers.mytoken = 'nihao';
      // # 1.2  这里一定要return   否则配置不成功  
      return config;
    }, function(err){
       // #1.3 对请求错误做点什么    
      console.log(err)
    })
	**// **#2. 响应拦截器 
    axios.interceptors.response.use(function(res) {
     //  #2.1  在接收响应做些什么  
      var data = res.data;
      return data;
    }, function(err){
      // #2.2 对响应错误做点什么  
      console.log(err)
    })