注:

网上很多都是使用post发送的例子,但是我使用过程当中,就是参数有问题,一直报参数无法present的问题,后来看到这篇博客,需要引入QS对参数进行转换,且要设置Content-Type,这样就可以了,特别注意QS的功能:

第一个坑:使用axios的then之后,要给data赋值,使用this报错,以下是原因和解决方案:

第一种方法

在then 这个里边的赋值方法this.followed = response.data.followed会出现报错,什么原因呢?在Google上查了下,原来是在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
可以看下 Stackoverflow 的解释:

In option functions like data and created, vue binds this to the
view-model instance for us, so we can use this.followed, but in the function inside then, this is not bound. So you need to preserve the view-model like (created means the component’s data structure is assembled, which is enough here, mounted will delay the operation more):

解决方法:

created() {  
   var self = this;  
   axios.post('/api/question/follower', {  
       'question':this.question,  
       'user':this.user  
   }).then(function(response){  
       // console.log(response.data);  
       self.followed = response.data.followed;  
   })  
}

或者我们可以使用 ES6 的 箭头函数arrow function,箭头方法可以和父方法共享变量 :

 created() {  
       axios.post('/api/question/follower', {  
           'question':this.question,  
           'user':this.user  
       }).then((response) => {  
           this.followed = response.data.followed;  
       })  
    }
第二种方法

在研究中我们发现我们可以讲拼接进接口中,但是在企业级开发中这样的书写方法并不规范,所以在这个时候我们需要将axios的写法规范,在一般写法中我们

$axios{
  urls:baseurl,
  methond:base,
  data:{}
  headers:[xx:xxxx]
}

但是我们可以在每个文件中对config进行编译
例如:

import Qs from 'qs'
var vm = this
var data = Qs.stringify({"name":"痞子达"});
 this.$http.post(vm.testUrl,data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((response)=>{
     alert(response.data.msg);
})

这个的使用前提是 我们需要 引入axios中的qs去改变 数据的格式
因此 为了避免这样的重复的书写动作 ,我们会在入口文件中进行公共写法的编译

在axios的官方文档中指出(https://www.kancloud.cn/yunye/axios/234845)
这里的主要操作是对 请求过程中的 then或者 catch
进行拦截 (也就是在请求发送前对我们的data数据进行 转化 )
官方文档中给出了 两种解决方法 我们使用 axios.create方法

可以使用自定义配置新建一个 axios 实例

axios.create([config])
var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

baseURL 将自动加在 url 前面,除非 url 是一个绝对 URL。它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL baseURL: ‘https://some-domain.com/api/’,

transformRequest 允许在向服务器发送前,修改请求数据
只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法
后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或

StreamtransformRequest: 
   [function (data) {
    //对 data 进行任意转换处理
    return data;
  }],

transformResponse 在传递给 then/catch 前,允许修改响应数据

  transformResponse: [function (data) {
     //对 data 进行任意转换处理
     return data;
  }],

headers 是即将被发送的自定义请求头

 headers: {'X-Requested-With': 'XMLHttpRequest'},

在这里改变 具体代码如下

var instance = axios.create({
 //config里面有这个transformRquest,这个选项会在发送参数前进行处理。
  //这时候我们通过Qs.stringify转换为表单查询参数
      transformRequest: [function (data) {
          data = Qs.stringify(data);
          return data;
      }],
      headers:{'Content-Type':'application/x-www-form-urlencoded'}
})

同时需要在vue.use(vueaxios , axios )前实例化一vue.use(vueaxios,instance)这里的方法 直接影响了整个 instance的 使用参考文章

引用文章(https://blog.csdn.net/nihaoqiulinhe/article/details/79084755)中关于数据格式不正确情况下修改数据格式的方法。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐