fetch在vue中的使用方法

1.安装fetch: npm install whatwg-fetch --save
2.在入口index.js文件中引入 import 'whatwg-fetch'
3.let url = global.commonIP + '/api/users/login'
let _this = this

            fetch(url, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                loginName: 'yj',
                password: 'yj',
              })
            }).then(function(res){
                res.json().then(function(obj){
                    if(obj.errcode == '200'){
                        alert('登录成功')
                        _this.$router.push('/')
                    }
                })
            })

4.上传文件
let url = global.commonIP + 'api/uploadFile/upload'
let _this = this
let data = new FormData()
data.append('uploadFile', this.$refs.file.files[0])
data.append('type', '2')

            fetch(url, {
              method: 'POST',
              body: data
            }).then(function(res){
                res.json().then(function(obj){
                    switch(obj.errcode){
                        case '200':
                            alert('上传成功')
                            break;
                        default:
                            alert(obj.errmsg)
                    }
                })
            })

5.跨域
fetch(url, {
method: 'GET',
mode: "cors",
headers: {
'Accept':'application/json,text/plain,/'
}
}).then(function(res){
console.log(res.text())
})
参考https://github.com/github/fetch
6.兼容问题需要安装es6-promise解决

image.png

在main.js文件：

import promise from 'es6-promise'
promise.polyfill();