开发中遇到的问题记录

2018-01-22

6 minute read

开发中遇到的问题记录

js去重(基本数组与对象那个数组)

 1    var unique = {};
 2    obarr = [
 3      {name: 'sdsd',key: 'zc'}
 4    ]
 5    obarr.forEach(function(gpa) {
 6         unique[JSON.stringify(gpa)] = gpa
 7     });
 8    obarr = Object.keys(unique).map(function(u) {
 9         return JSON.parse(u)
10     });

POST application/json 适用于传递多层的json 本来以为自己写了那么多post请求，ajax已经难不住了呢，结果现实无比的残酷，后台换成了java，发多层级的json，后台就取不到了，虽然到最后还是配置正确了，。。记录下来，引以为戒，

 1axios.post("POST", "/URL", this.state.datas, {headers: {"Content-Type": "application/json"}})
 2    .then( res => {  
 3               console.log(res.data)     
 4           })
 5    .catch(err => {
 6            console.log(err)
 7        })
 8
 9// 来一个原生版的
10    var xhr = new XMLHttpRequest();
11    xhr.onreadystatechange = function () {
12        if (xhr.readyState == 4 && xhr.status == 200) {
13            var res = JSON.parse(xhr.responseText);
14              
15            }
16        }
17    }
18    xhr.open("POST", "./toLogin.do", true);
19    xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
20    xhr.send({})

其实重点就是请求头信息

1"Content-Type": "application/json"
2// 顺便一提
3"Content-Type": "application/x-www-form-urlencoded" // 适用于大部分情况
4"Content-Type": "multipart/form-data" // 适用于文件上传

为什么在vue的组件中，data要用function返回对象呢？

类比与引用数据类型。js在赋值object对象时，是直接一个相同的内存地址如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。用function return 其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题

[转载]Vue 组件data为什么必须是函数？
在创建或注册模板的时候，传入一个data属性作为用来绑定的数据。但是在组件中，data必须是一个函数，而不能直接把一个对象赋值给它。

1Vue.component('my-component', {
2  template: '<div>OK</div>',
3  data() {
4    return {} // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回
5  },
6})

你在前面看到，在new Vue()的时候，是可以给data直接赋值为一个对象的。这是怎么回事，为什么到了组件这里就不行了。

你要理解，上面这个操作是一个简易操作，实际上，它首先需要创建一个组件构造器，然后注册组件。注册组件的本质其实就是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。所以，注册组件其实并不产生新的组件类，但会产生一个可以用来实例化的新方式。

理解这点之后，再理解js的原型链：

 1var MyComponent = function() {}
 2MyComponent.prototype.data = {
 3  a: 1,
 4  b: 2,
 5}
 6// 上面是一个虚拟的组件构造器，真实的组件构造器方法很多
 7
 8var component1 = new MyComponent()
 9var component2 = new MyComponent()
10// 上面实例化出来两个组件实例，也就是通过<my-component>调用，创建的两个实例
11
12component1.data.a === component2.data.a // true
13component1.data.b = 5
14component2.data.b // 5

可以看到上面代码中最后三句，这就比较坑爹了，如果两个实例同时引用一个对象，那么当你修改其中一个属性的时候，另外一个实例也会跟着改。这怎么可以，两个实例应该有自己各自的域才对。所以，需要通过下面方法来进行处理：

1var MyComponent = function() {
2  this.data = this.data()
3}
4MyComponent.prototype.data = function() {
5  return {
6    a: 1,
7    b: 2,
8  }
9}

 1var MyComponent = function() {
 2  this.data = this.data()
 3}
 4MyComponent.prototype.data = function() {
 5  return {
 6    a: 1,
 7    b: 2,
 8  }
 9}
10function () {
11  return {
12    a: 1,
13    b: 2,
14  }
15}
16var component1 = new MyComponent()
17var component2 = new MyComponent()
18undefined
19component1.data===component2.data
20false
21component1.data
22Object {a: 1, b: 2}

这样每一个实例的data属性都是独立的，不会相互影响了。所以，你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关。其实vue不应该把这个方法名取为data()，应该叫setData或其他更容易立即的方法名。

axios 请求中文传输返回乱码

前后端需使用相同的编码解码方式，默认是UTF-8, axios 使用以下代码处理

1axios.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

axios, post、put请求传递不了参数?

首先，可以试着把axios请求部分换成：

1axios.post('post.php', {
2    a: '1'
3}).then(function(response) {
4    alert(response.data);
5}).catch(function(error) {
6    alert(error);
7});

另外，由于axios默认发送数据时，数据格式是Request Payload，而并非我们常用的Form Data格式，PHP后端未必能正常获取到，所以在发送之前，需要使用qs模块对其进行处理。

1import qs from 'qs';
2...
3axios.post('post.php', qs.stringify({
4    a: '1'
5}))
6.then( ... )
7.catch( ... );

开发中遇到的问题记录

js去重(基本数组 与 对象那个数组)

为什么在vue的组件中，data要用function返回对象呢？

axios 请求中文传输返回乱码

axios, post、put请求传递不了参数?

js去重(基本数组与对象那个数组)