Axios and VueI18n

1,365 阅读1分钟

一. axios

1:基于promise的http库,可以用在浏览器和node.js中


2:特性

	- 从浏览器中创建XMLHttpRequets
	- 支持浏览器和node.js
	- 支持promise API
	- 拦截请求和响应
	- 自动转换json数据,客户端支持防御XSRF

3:安装

 npm install axios || bower install axios 

4:创建实例

import axios from axios
import { MessageBox, Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
	baseURL: process.env.VUE_APP_BASE_API //请求路径
	timeout: 5000, //请求超时时间 
})

5:创建请求拦截和响应拦截

// request.js
// 请求拦截器
service.interceptors.request.use(
	config=>{
		//在发送请求之前的处理
	}
)

// 响应拦截
service.interceptors.response.use(
	response=>{
		//对应数据处理
	},
	error=>{
		Message({
			message:error.message,
			type:error,
			duration:5*1000
		})
		return Promise.reject(error)
	}
)

6:生成接口


import request from '@/utils/request
// 生成接口导出
export function fetchList(){
	url:"url"
	method:"get/post/put/delete/"
	params/data
}

7:调用接口


// 页面调用
import {fetchList} from '...'
methods:{
	getList(){
		fetchList().then(res=>{})
	}
}

二:i18n

1:国际化(i18n),网站以不同的语言呈现

2:安装

npm install vue-i18n --save-dev

3:使用

// main.js
import i18n from '@/i18n'
new Vue({
	el:"#app",
	i18n,
})

// i18n->index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en.json' //多语言英文json文件
import zhCN from './zh-cn.json' //多语言中文json文件
import ... from '...' //各国语言json文件
Vue.use(VueI18n)

export const defaultLang = 'zh-cn'
	const il8n = new VueI18n({
		local:defaultLang,
		messages:{
			'zh-cn':zhCN,
			'en':en,
			......
		}
	})
export default i18n
	
// 页面中使用
	// vue组件模板的使用
	<div>{{$t('message.msg')}}</div>
	// vue组件data中赋值的使用
	data:{
		msg:this.$t('message.msg');
	}