Vue.js(七) http (vue-resource和axios)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/vbirdbest/article/details/85290157

一：vue-resource

1.1 vue-resource简介

vue-resource是Vue的一个http插件，功能类似于ajax。

可以通过使用全局Vue.http或者Vue实例this.$http来引用http服务。

官网地址：https://github.com/vuejs/vue-resource

1.2 安装vue-resource

在package.json中引入vue-resource，然后使用npm install安装

"dependencies": {
    "vue": "^2.5.2",
    "vue-resource": "^1.5.1"
}

npm install
// 或者
cnpm install

在src/main.js中使用插件

import VueResource from 'vue-resource'
Vue.use(VueResource)

1.3 请求方式

常用的有get、post、put、delete，每个函数的返回值都是Promise对象，异步API请求成功后会调用then()方法

// 获取资源
Promise get(url, [options])
// 创建资源
Promise post(url, [body], [options])
// 修改资源
Promise put(url, [body], [options])
// 删除资源
Promise delete(url, [options])

Promise head(url, [options])
Promise jsonp(url, [options])
Promise patch(url, [body], [options])

// 全局Vue对象
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// Vue实例
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

使用示例

this.$http.get('/someUrl').then((response) => {
  // success callback
}, (response) => {
  // error callback
});

请求

参数	类型	描述
url	string	请求发送到的 URL
body	Object, FormData, string	请求中要发送的数据
headers	Object	作为 HTTP 请求头发送的 Headers 对象
params	Object	作为 URL 参数发送的 Parameters 对象
method	string	HTTP 方法 (例如： GET, POST, ...)
timeout	number	请求超时的毫秒数 (0 为不超时)
before	function(request)	在请求发送之前用于修改请求选项的回调函数
progress	function(event)	上传时用于控制 ProgressEvent 的回调函数
credentials	boolean	Indicates whether or not cross-site Access-Control requests should be made using credentials
emulateHTTP	boolean	如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。 Vue.http.options.emulateHTTP = true;
emulateJSON	boolean	如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。 Vue.http.options.emulateJSON = true;

响应

属性	类型	描述
url	string	响应的源 URL
body	Object, Blob, string	响应的数据报文
headers	Header	响应头对象
ok	boolean	从 200 到 299 的 HTTP 状态码
status	number	响应中的 HTTP 状态码
statusText	string	响应中的 HTTP 状态文本
函数	类型	描述
text()	Promise	作为字符串解析报文
json()	Promise	作为 Json 对象解析报文
blob()	Promise	作为 Blob 对象解析报文

1.4 简单示例

App.vue

<template>
  <div id="app">
    {{ res }}
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        res: {}
      }
    },
    created () {
      this.$http.post('http://127.0.0.1:9000/api/user/login',
        {username: 'mengday', password: '123456'},
        {emulateJSON:true})
        .then((response) => {
          let body = response.body
          this.res = body
        }, (error) => {
          console.log(error)
        })
        .catch(error => {
          console.log('在整个请求到响应过程中，只要程序出错了就会被调用。')
        }
      )
    }
  }
</script>

catch方法用于捕捉程序的异常，catch方法和errorCallback是不同的，errorCallback只在响应失败时调用，而catch则是在整个请求到响应过程中，只要程序出错了就会被调用。

interceptors：拦截器用于拦截请求，可以在请求发送前做一些操作(如对数据进行签名、显示加载中、修改请求方式、修改请求参数等)，也可以在请求响应后做一些处理(如验证请求报文等，验证接口的错误码等)。

src/main.js

// 全局请求拦截器
Vue.http.interceptors.push((request, next) => {
  console.log('前置拦截：在请求前拦截, 例如修改请求, 显示loading')
  console.log(request.body)
  request.headers.set('AccessToken', 'token')
  next((response) => {
    console.log('后置拦截：在请求响应后拦截, 例如验签等')
    console.log(response.body)
  })
})

注意：在接口调用时会出现跨域问题，可以放在后端解决，也可以使用jsonp()来解决。

@Configuration
@EnableWebMvc
public class WebMvcConfiguration extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(false).maxAge(3600);
    }
}

SampleController

@RestController
@RequestMapping("/api/user")
public class SampleController {

    @PostMapping(value = "/login", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        @RequestHeader("AccessToken") String token) {
        String result = "{" +
                "\"code\": 0," +
                "\"msg\": \"SUCCESS\"," +
                "\"data\": {" +
                "\"username\": \"" + username + "\"," +
                "\"token\":\"" + UUID.randomUUID() + "\"" +
                "}" +
                "}";

        return result;
    }
}

二：axios

2.1 简介

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。

// 安装axios  
// --save 是将插件名称和版本号添加到package.json中的dependencies中
cnpm install --save axios

在src/main.js中引入axios

import axios from 'axios'

2.2 api

Promise axios.request（config）
Promise axios.get（url [，config]）
Promise axios.post（url [，data [，config]]）
Promise axios.put（url [，data [，config]]）
Promise axios.delete（url [，config]）
Promise axios.head（url [，config]）
Promise axios.patch（url [，data [，config]]）

// 构造函数：根据配置选项创建一个Axios实例对象
AxiosInstance axios.create([config])

config

{
	// `url`是将用于请求的服务器URL
	url: '/user',
	
	// `baseURL`将被添加到`url`前面，除非`url`是绝对的。
	// 可以方便地为 axios 的实例设置`baseURL`，以便将相对 URL 传递给该实例的方法。
	baseURL: 'https://some-domain.com/api/',
	
	// `method`是发出请求时使用的请求方法
	method: 'get', // 默认
	
	// “responseType”表示服务器将响应的数据类型
	responseType: 'json', // default
	
	// `headers`是要发送的自定义 headers
	headers: {'Content-Type': 'application/json'},
	
	// `params`是要与请求一起发送的URL参数
	// 必须是纯对象或URLSearchParams对象
	params: {
	    ID: 12345
	},

	// `paramsSerializer`是一个可选的函数，负责序列化`params`
	// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
	paramsSerializer: function(params) {
	    return Qs.stringify(params, {arrayFormat: 'brackets'})
	},
	
	// `data`是要作为请求主体发送的数据
	// 仅适用于请求方法“PUT”，“POST”和“PATCH”
	// 当没有设置`transformRequest`时，必须是以下类型之一：
	// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
	// - Browser only: FormData, File, Blob
	// - Node only: Stream
	data: {
	  firstName: 'Fred'
	},
	
	// `timeout`指定请求超时之前的毫秒数。
	// 如果请求的时间超过'timeout'，请求将被中止。
	timeout: 1000,
	
	// `transformRequest`允许在请求数据发送到服务器之前对其进行更改
	// 这只适用于请求方法'PUT'，'POST'和'PATCH'
	// 数组中的最后一个函数必须返回一个字符串，一个 ArrayBuffer或一个 Stream
	transformRequest: [function (data) {
	  // 做任何你想要的数据转换
	
	  return data;
	}],
	
	// `transformResponse`允许在 then / catch之前对响应数据进行更改
	transformResponse: function (data) {
	// Do whatever you want to transform the data
	
	  return data;
	}],
	
	
	// `withCredentials`指示是否跨站点访问控制请求
	// should be made using credentials
	withCredentials: false, // default
	
	// `adapter'允许自定义处理请求，这使得测试更容易。
	// 返回一个promise并提供一个有效的响应（参见[response docs]（＃response-api））
	adapter: function (config) {
	
	},
	
	// `auth'表示应该使用 HTTP 基本认证，并提供凭据。
	// 这将设置一个`Authorization'头，覆盖任何现有的`Authorization'自定义头，使用`headers`设置。
	auth: {
	  username: 'xxx',
	  password: 'xxx'
	},
	
	//`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称
	xsrfCookieName: 'XSRF-TOKEN', // default
	
	// `xsrfHeaderName`是携带xsrf令牌值的http头的名称
	xsrfHeaderName: 'X-XSRF-TOKEN', // default
	
	// `onUploadProgress`允许处理上传的进度事件
	onUploadProgress: function (progressEvent) {
	// 使用本地 progress 事件做任何你想要做的
	},
	
	// `onDownloadProgress`允许处理下载的进度事件
	onDownloadProgress: function (progressEvent) {
	// Do whatever you want with the native progress event
	},
	
	// `maxContentLength`定义允许的http响应内容的最大大小
	maxContentLength: 2000,
	
	// `validateStatus`定义是否解析或拒绝给定的promise
	// HTTP响应状态码。如果`validateStatus`返回`true`（或被设置为`null` promise将被解析;否则，promise将被
	  // 拒绝。
	validateStatus: function (status) {
		return status >= 200 && status < 300; // default
	},
	
	// `maxRedirects`定义在node.js中要遵循的重定向的最大数量。
	// 如果设置为0，则不会遵循重定向。
	maxRedirects: 5, // 默认
	
	// `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。
	// 允许配置类似`keepAlive`的选项，
	// 默认情况下不启用。
	httpAgent: new http.Agent({ keepAlive: true }),
	httpsAgent: new https.Agent({ keepAlive: true }),
	
	// 'proxy'定义代理服务器的主机名和端口
	// `auth`表示HTTP Basic auth应该用于连接到代理，并提供credentials。
	// 这将设置一个`Proxy-Authorization` header，覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。
	proxy: {
	  host: '127.0.0.1',
	  port: 9000,
	  auth: : {
	  	username: 'xxx',
	    password: 'xxxx'
	  }
	},
	
	// “cancelToken”指定可用于取消请求的取消令牌
	// (see Cancellation section below for details)
	cancelToken: new CancelToken(function (cancel) {
	
	})
}

2.3 请求示例

// 自定义Axios实例
var instance = axios.create({
  method: 'POST',
  baseURL: 'https://api.example.com'
})
instance.defaults.headers.common ['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$http = instance

// axios(url[, config])
axios({
	method: 'post',
	url: '/user/12345',
	data: {
		firstName: 'Fred',
		lastName: 'Flintstone'
	}
});

2.4 简单示例

src/main.js

import axios from 'axios'

// 给Vue实例添加一个是个属性，这样在每个实例中就可以使用this.$http来访问axios实例了
Vue.prototype.$http = axios

// 一些默认的参数
axios.defaults.baseURL = 'http://127.0.0.1:9000/api'

// 请求拦截器：在发送请求前拦截
axios.interceptors.request.use(config => {
  console.log('请求发送前拦截')
  config.headers.common['AccessToken'] = 'token'
  return config;
}, error => {
  return Promise.reject(error)
})

// 响应拦截器：在请求响应之后拦截
axios.interceptors.response.use(response => {
  console.log('请求响应后处理')
  return response;
}, error => {
  return Promise.reject(error)
})

App.vue

<template>
  <div id="app">
    {{ res }}
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        res: {}
      }
    },
    created () {
      this.$http.post('/user/login',
        {username: "mengday", password: "123456"})
        .then(response => {
          console.log(response)
          if (response.data.code === 0) {
            this.res = response.data.data
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
</script>

SampleController

@RestController
@RequestMapping("/api/user")
public class SampleController {

    @PostMapping(value = "/login", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    public String login(@RequestBody User user) {
        String result = "{" +
                "\"code\": 0," +
                "\"msg\": \"SUCCESS\"," +
                "\"data\": {" +
                "\"username\": \"" + user.getUsername() + "\"," +
                "\"token\":\"" + UUID.randomUUID() + "\"" +
                "}" +
                "}";

        return result;
    }
}

三：mockjs

开发中前端开发和后端开发一般是同时开发的，不可能前端开发等后端接口开发好后再开发，只需要后端API给出接口定义即可，然后前端就可以模拟后台API进行开发。

mockjs官网：https://github.com/nuysoft/Mock/wiki

3.1 安装mockjs

cnpm install --save mockjs

3.2 src/mock/index.js

import Mock from 'mockjs'
import { Random } from 'mockjs'

// 全局设置
Mock.setup({
  timeout: 1000
})

function success(data) {
  return {
    code: 0,
    msg: 'SUCCESS',
    data: data
  }
}

function error(code, msg) {
  return {
    code: code,
    msg: msg
  }
}

//模拟后台返回的数据
let users = () => {
  let data = {
    guid: Random.guid(),
    string: Random.string(10),
    number: Random.string('number', 8, 10),
    date: Random.date('yyyy-MM-dd'),
    time: Random.time('A HH:mm:ss'),
    county: Random.county(),
    cword: Random.cword(4, 16), // 随机生成任意名称
    cname: Random.cname(),
    csentence: Random.csentence(10, 32)
  }

  return success(data)
}

// 路径和方法绑定
// rtype表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等
Mock.mock('/users', /GET|POST|PUT|DELETE/i, users)

3.3 src/main.js

import './mock/index.js'

// 注意mock时不支持baseURL
// axios.defaults.baseURL = 'http://127.0.0.1:9000/api'

3.4 App.vue

this.$http
	.post('/users')
    .then(response => {
      console.log(response)
      if (response.data.code === 0) {
        this.res = response.data.data
      }
    })
    .catch(error => {
      console.log(error)
    })