vue 2之 axios

Vue.js 2之axios

1、axios官方文档

Axios 是一个基于 promise 的 HTTP 库。
https://www.kancloud.cn/yunye...

2、配合vue使用

注意：之前的Vue.js使用的是vue-resource， 不过后期不在维护，而是使用axios.

(1)、安装axios

$ npm install axios

(2)、引入axios

在main.js中引入axios,注意：下面使用的是：

import Axios from 'axios'
Vue.prototype.$axios = Axios;  //在Vue的原型上添加$axios方法

(3)、组件中进行网络请求
(axios官方文档:https://www.kancloud.cn/yunye...

①、get请求：

  //基本情况请求方式
  this.$axios.get(url)
    .then(rsp => {console.log(rsp)})
    .catch(error => {console.log(error)})
    
    
  //包含参数的情况一
  this.$axios.get('/user', {
    params: {
      ID: 12345
    }
  })
     .then(rsp => {console.log(rsp)})
     .catch(error => {console.log(error)})
   
   
   
   //包含参数的情况二
   this.$axios.get('/user?ID=12345')
     .then(rsp => {console.log(rsp)})
     .catch(error => {console.log(error)})
     

②、POST请求：

post请求参数的两种格式：

    form-data:?name=iwen&age=10
    x-www-form-urlencoded:{name:'iwen',age:20} 

注意：axios接收的post请求参数的格式是form-data格式,所以需要使用插件“qs”，将请求参数转换为form-data格式。如下：

<script>
  import qs from 'qs'

  export default {
    name: "axios",
    data(){
      return{

      }
    },
    created (){
    //使用qs.stringify将参数格式进行转换         
    this.$axios.post('https://route.showapi.com/25-3',qs.stringify({
        id:'130310',
        showapi_appid:'223355',
        showapi_test_draft:false,
        showapi_timestamp:'20180228102233',
        showapi_sign:'8755acc9b708272bdce7bbbb168f4193'
      }))
      .then(rsp=>{ 
          console.log(rsp)
      })
     .catch(error=>{
     //在不清楚error的返回数据结构时，可以返回error,然后打断点，查看error返回结构
         console.log(error)
     })
    }
  }
</script>

（4）、全局的 axios 默认值

首先，安装qs插件：

npm install qs --save-dev

然后，在main.js中全局设置加入以下代码：

//引入qs
import qs from 'qs'

//设置baseURL
Axios.defaults.baseURL = 'https://route.showapi.com';
//设置token值    
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//请求头
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 

最后，在hello.vue中将url去掉baseURL部分即可。

created (){
//原来的url为"https://route.showapi.com/25-3",在main.js中全局设置后，此处只写url剩下的部分即可。
  this.$axios.post('/25-3',qs.stringify({
    id:'130130',
    showapi_appid:'232357',
    showapi_test_draft:false,
    showapi_timestamp:'20180228104641',
    showapi_sign:'8d01a1a499fb65a920e8def2c92fa57f'
  }))
  .then(rsp=>{
    console.log('succsee:')
    console.log(rsp)
  })
  .catch(error=>{
     console.log(error)
  })
}    

（5）、axios拦截器

在main.js中设置拦截，且他们是在请求和响应的then和catch之前拦截的。语法如下：

// 添加请求拦截器
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);
  });

实例应用：在post请求的时候需要将请求参数进行转换，这个操作可以在拦截器中处理，这样在单独的组件中，请求参数就不需要处理了。如下：

main.js中配置：

import qs from 'qs'

Axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log(config)
  if(config.method === 'post'){
  //将请求参数进行转换，这里是全局配置post请求参数
    config.data = qs.stringify(config.data)
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});        

相应组件设置

created (){
//这里的请求参数不需要处理，按照之前的书写方式即可。
  this.$axios.post('/25-3',{
    id:'13030300',
    showapi_appid:'231235',
    showapi_test_draft:false,
    showapi_timestamp:'20180228110925',
    showapi_sign:'437f31128631e33542ad23a65678e709'
  })
  .then(rsp=>{
    console.log('succsee:')
    console.log(rsp)
  })
}

3、跨域解决方案

注意：此种跨域解决方案，只适用于测试阶段。因为打包（准备上线，此时前后端是放在一起了）的时候，不会具备服务器，此时不存在跨域问题，这时候就后由端解决API接口问题。

(1)、首先起一个服务为localhost:8080

新建localserver文件，执行：

 sudo npm install -g http-server 

然后在localserver下创建文件data.json

//data.json文件
{
  "name": "localserver",
  "version": "0.0.1",
  "size":30,
  "age":20,
  "class":"university"
}

最后终端进入文件localserver执行http-server,这样就可以访问data.json文件了。

（2）、假设本地项目是localhost：8020，这样访问127.0.0.1:8080/data.json就属于跨域访问。

① 项目的config/index.js文件：

proxyTable: {
  '/api':{
    //需要跨区请求的地址
    target:"http://127.0.0.1:8080",
    changeOrigin:true, //允许跨域
    pathRewrite:{
      '^/api':''
    }
  }
}

pathRewrite用法：使用代理, 首先你得有一个标识, 告诉他你这个连接要用代理. 不然的话, 可能你的 html, css, js这些静态资源都跑去代理. 所以我们只要接口用代理, 静态文件用本地.'/iclient': {}, 就是告诉node, 我接口只要是'/iclient'开头的才用代理.所以你的接口就要这么写 /iclient/xx/xx. 最后代理的路径就是 http://xxx.xx.com/iclient/xx/... 我正确的接口路径里面没有/iclient啊. 所以就需要 pathRewrite,用''^/iclient'':'', 把'/iclient'去掉, 这样既能有正确标识, 又能在请求接口的时候去掉iclient.

②项目的main.js文件添加：

Vue.prototype.HOST = '/api'

③项目的组件中：

created(){
  let url = this.HOST + "/data.json";
  console.log(url);//url为：api/data.json,此处的api就是指localhost:8080。
  this.$axios.get(url).then(
    rsp=>{
      console.log(rsp)
    }
  ).catch(error=>{
    console.log(error)
  })
}

注意：以上跨域解决办法只适用于开发环境，如果想要一套兼容开发和生产环境的代码，避免生产和开发环境之间啊的切换，频繁修改接口调用代码，需要做如下判断：

let urlApi = ''
let url = window.location.href
if(url.indexOf('8080') > -1){
    urlApi = '/list/1/xxx'
}else{
    urlApi = 'http://api.xxxxxxxx.com/1/xxx'
}

4、免费的豆瓣API使用方法

豆瓣API网站：https://developers.douban.com...

使用豆瓣API手册 ——> 豆瓣Api V2(测试版) ——> Api V2索引找需要的API ——> 电影API ——> 榜单：Top250，可以看到下图的API详细信息

根据图中的URI，访问:

'api.douban.com/v2/movie/top250'   即可得到数据。

5、mock：数据模拟

（1）、mock数据模拟三种情况：

①自己创建JSON文件使用GET请求形式访问数据。

 优点：方便快捷
 缺点：只能使用GET请求

②项目中集成服务器，模拟各种接口。(使用的最多)

 优点：模拟真实上线环境
 缺点：增加开发成本

③直接使用线上数据。

 优点：真实
 缺点：不一定每个项目都存在，一般都是前后端同时开发的。这种一般是重构项目时候用到。

④数据模拟库

http://mockjs.com/ （需要开VPN访问）
它可以随机生成数据

6、axios访问vue-cli项目的本地json文件

（1）、访问服务器文件，应该把 json文件放在最外层的static文件夹，这个文件夹是vue-cli内置服务器向外暴露的静态文件夹。

(2)、 一定要用get的请求方式，post就会404。