fetch vue读取json文件_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();