**# 注:
网上很多都是使用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,或 Stream
  transformRequest: [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

前往低代码交流专区

更多推荐