fetch在vue中的使用方法 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 = https://www.it610.com/article/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解决