axios

axios

axios

每天进步一点点戏子 发表了文章 • 0 个评论 • 1696 次浏览 • 2018-01-16 11:25 • 来自相关话题

// src/api/index.js
import axios from 'axios'
const instance = axios.create({
// 根据自己的业务配置
baseURL: '/api',
withCredentials: true
})
instance.interceptors.request.use(config => {
// request 拦截器
// 比如添加 token
return config
})
instance.interceptors.response.use(response => {
// 返回数据
return response.data
}, error => {
// 处理错误码,比如 404跳转
return Promise.reject(error);
})
export default instance// src/main.js
import api from './api'
// 获取列表
api.get('users').then(response => {
console.log(response)
})
// 获取单个
api.get('users/1').then(response => {
console.log(response)
})
// 添加
api.post('users', { name: 'lopo' }).then(response => {
console.log(response)
})
// 修改
api.put('users/1', { name: 'vlopo' }).then(response => {
console.log(response)
})
// 删除
api.delete('users/1').then(response => {
console.log(response)
})?
?
? 查看全部
// src/api/index.js
import axios from 'axios'
const instance = axios.create({
// 根据自己的业务配置
baseURL: '/api',
withCredentials: true
})
instance.interceptors.request.use(config => {
// request 拦截器
// 比如添加 token
return config
})
instance.interceptors.response.use(response => {
// 返回数据
return response.data
}, error => {
// 处理错误码,比如 404跳转
return Promise.reject(error);
})
export default instance
// src/main.js
import api from './api'
// 获取列表
api.get('users').then(response => {
console.log(response)
})
// 获取单个
api.get('users/1').then(response => {
console.log(response)
})
// 添加
api.post('users', { name: 'lopo' }).then(response => {
console.log(response)
})
// 修改
api.put('users/1', { name: 'vlopo' }).then(response => {
console.log(response)
})
// 删除
api.delete('users/1').then(response => {
console.log(response)
})
?
?
?

Vue axios 封装 拦截示例

VUElopo1983 发表了文章 • 0 个评论 • 2112 次浏览 • 2018-01-03 04:42 • 来自相关话题

?
封装export function ajax(url, params, type) {
let config = { method: type || 'post' }
if (type === 'GET') {
config.params = params
} else {
config.data = type ? {} : params
}
console.log(config)
return instance(url, config)
.then(response => {
return response.data
})
.catch(error => {
console.log('通信失败,请检查您的网络,或联系系统管理员')
})
}


?REQ拦截instance.interceptors.request.use(
function(config) {
if (Lockr.get('token')) {
config.headers.common['Authorization'] = Lockr.get('token')
}
return config
},
error => {
return Promise.reject(error)
}
)


RES拦截instance.interceptors.response.use(res => {
if (res.data.code) {
switch (res.data.code) {
case 401:
Lockr.rm('token')
window.location.href = '/#/admin/login/'
break
}
} else {
}
return res
})


?
使用FormData传递数据const instance = axios.create()
instance.defaults.headers.post['Content-Type'] = 'multipart/form-data'
instance.defaults.headers.put['Content-Type'] = 'multipart/form-data'
instance.defaults.headers.patch['Content-Type'] = 'multipart/form-data'



?使用接口
export default {
getList(display = '7', page = '1', db, type = '1') {
let params = {
'display':display,
'current':page,
'type':type
}
return ajax(db, params,'GET')
},
//
putList(db,id) {
let data = new FormData()
data.append('id',id)
return ajax(db, data,'PATCH')
}}


? 查看全部
?
封装
export function ajax(url, params, type) {
let config = { method: type || 'post' }
if (type === 'GET') {
config.params = params
} else {
config.data = type ? {} : params
}
console.log(config)
return instance(url, config)
.then(response => {
return response.data
})
.catch(error => {
console.log('通信失败,请检查您的网络,或联系系统管理员')
})
}


?REQ拦截
instance.interceptors.request.use(
function(config) {
if (Lockr.get('token')) {
config.headers.common['Authorization'] = Lockr.get('token')
}
return config
},
error => {
return Promise.reject(error)
}
)


RES拦截
instance.interceptors.response.use(res => {
if (res.data.code) {
switch (res.data.code) {
case 401:
Lockr.rm('token')
window.location.href = '/#/admin/login/'
break
}
} else {
}
return res
})


?
使用FormData传递数据
const instance = axios.create()
instance.defaults.headers.post['Content-Type'] = 'multipart/form-data'
instance.defaults.headers.put['Content-Type'] = 'multipart/form-data'
instance.defaults.headers.patch['Content-Type'] = 'multipart/form-data'



?使用接口

export default {
getList(display = '7', page = '1', db, type = '1') {
let params = {
'display':display,
'current':page,
'type':type
}
return ajax(db, params,'GET')
},
//
putList(db,id) {
let data = new FormData()
data.append('id',id)
return ajax(db, data,'PATCH')
}}


?

vue-cli+pug+less+vuex+vue-form+axios+lodash webpack.json

VUElopo1983 发表了文章 • 1 个评论 • 2473 次浏览 • 2017-05-03 16:31 • 来自相关话题

{
? "name": "qdcenter",
? "version": "1.0.0",
? "description": "qiduo new user center",
? "author": "lopo <lopo1983@foxmail.com>",
? "private": true,
? "scripts": {
? ? "dev": "node build/dev-server.js",
? ? "start": "node build/dev-server.js",
? ? "build": "node build/build.js"
? },
? "dependencies": {
? ? "vue": "^2.2.6",
? ? "vue-router": "^2.3.1"
? },
? "devDependencies": {
? ? "animate.css": "^3.5.2",
? ? "autoprefixer": "^6.7.2",
? ? "available": "^2.0.3",
? ? "axios": "^0.15.3",
? ? "babel-core": "^6.22.1",
? ? "babel-loader": "^6.2.10",
? ? "babel-plugin-transform-runtime": "^6.22.0",
? ? "babel-polyfill": "^6.23.0",
? ? "babel-preset-env": "^1.2.1",
? ? "babel-preset-stage-2": "^6.22.0",
? ? "babel-register": "^6.22.0",
? ? "bce-sdk-js": "^0.2.7",
? ? "bootstrap": "^3.3.7",
? ? "chalk": "^1.1.3",
? ? "connect-history-api-fallback": "^1.3.0",
? ? "copy-webpack-plugin": "^4.0.1",
? ? "css-loader": "^0.26.1",
? ? "echarts": "^3.6.1",
? ? "eventsource-polyfill": "^0.9.6",
? ? "express": "^4.14.1",
? ? "extract-text-webpack-plugin": "^2.0.0",
? ? "file-loader": "^0.10.1",
? ? "friendly-errors-webpack-plugin": "^1.1.3",
? ? "function-bind": "^1.1.0",
? ? "html-webpack-plugin": "^2.28.0",
? ? "http-proxy-middleware": "^0.17.3",
? ? "less": "^2.7.2",
? ? "less-loader": "^3.0.0",
? ? "lodash": "^4.17.4",
? ? "opn": "^4.0.2",
? ? "optimize-css-assets-webpack-plugin": "^1.3.0",
? ? "ora": "^1.1.0",
? ? "pug": "^2.0.0-beta.12",
? ? "pug-filters": "^2.1.2",
? ? "pug-loader": "^2.3.0",
? ? "rimraf": "^2.6.0",
? ? "semver": "^5.3.0",
? ? "style-loader": "^0.14.1",
? ? "url-loader": "^0.5.7",
? ? "vue": "^2.3.3",
? ? "vue-event-calendar": "^1.3.0",
? ? "vue-form": "^4.1.1",
? ? "vue-loader": "^11.1.4",
? ? "vue-router": "^2.5.3",
? ? "vue-style-loader": "^2.0.0",
? ? "vue-template-compiler": "^2.2.4",
? ? "vuex": "^2.2.1",
? ? "webpack": "^2.3.3",
? ? "webpack-dev-middleware": "^1.10.0",
? ? "webpack-hot-middleware": "^2.18.0",
? ? "webpack-merge": "^4.1.0"
? },
? "engines": {
? ? "node": ">= 4.0.0",
? ? "npm": ">= 3.0.0"
? },
? "browserslist": [
? ? "> 1%",
? ? "last 2 versions",
? ? "not ie <= 8"
? ]
}
[size=13]
[/size] 查看全部
{
? "name": "qdcenter",
? "version": "1.0.0",
? "description": "qiduo new user center",
? "author": "lopo <lopo1983@foxmail.com>",
? "private": true,
? "scripts": {
? ? "dev": "node build/dev-server.js",
? ? "start": "node build/dev-server.js",
? ? "build": "node build/build.js"
? },
? "dependencies": {
? ? "vue": "^2.2.6",
? ? "vue-router": "^2.3.1"
? },
? "devDependencies": {
? ? "animate.css": "^3.5.2",
? ? "autoprefixer": "^6.7.2",
? ? "available": "^2.0.3",
? ? "axios": "^0.15.3",
? ? "babel-core": "^6.22.1",
? ? "babel-loader": "^6.2.10",
? ? "babel-plugin-transform-runtime": "^6.22.0",
? ? "babel-polyfill": "^6.23.0",
? ? "babel-preset-env": "^1.2.1",
? ? "babel-preset-stage-2": "^6.22.0",
? ? "babel-register": "^6.22.0",
? ? "bce-sdk-js": "^0.2.7",
? ? "bootstrap": "^3.3.7",
? ? "chalk": "^1.1.3",
? ? "connect-history-api-fallback": "^1.3.0",
? ? "copy-webpack-plugin": "^4.0.1",
? ? "css-loader": "^0.26.1",
? ? "echarts": "^3.6.1",
? ? "eventsource-polyfill": "^0.9.6",
? ? "express": "^4.14.1",
? ? "extract-text-webpack-plugin": "^2.0.0",
? ? "file-loader": "^0.10.1",
? ? "friendly-errors-webpack-plugin": "^1.1.3",
? ? "function-bind": "^1.1.0",
? ? "html-webpack-plugin": "^2.28.0",
? ? "http-proxy-middleware": "^0.17.3",
? ? "less": "^2.7.2",
? ? "less-loader": "^3.0.0",
? ? "lodash": "^4.17.4",
? ? "opn": "^4.0.2",
? ? "optimize-css-assets-webpack-plugin": "^1.3.0",
? ? "ora": "^1.1.0",
? ? "pug": "^2.0.0-beta.12",
? ? "pug-filters": "^2.1.2",
? ? "pug-loader": "^2.3.0",
? ? "rimraf": "^2.6.0",
? ? "semver": "^5.3.0",
? ? "style-loader": "^0.14.1",
? ? "url-loader": "^0.5.7",
? ? "vue": "^2.3.3",
? ? "vue-event-calendar": "^1.3.0",
? ? "vue-form": "^4.1.1",
? ? "vue-loader": "^11.1.4",
? ? "vue-router": "^2.5.3",
? ? "vue-style-loader": "^2.0.0",
? ? "vue-template-compiler": "^2.2.4",
? ? "vuex": "^2.2.1",
? ? "webpack": "^2.3.3",
? ? "webpack-dev-middleware": "^1.10.0",
? ? "webpack-hot-middleware": "^2.18.0",
? ? "webpack-merge": "^4.1.0"
? },
? "engines": {
? ? "node": ">= 4.0.0",
? ? "npm": ">= 3.0.0"
? },
? "browserslist": [
? ? "> 1%",
? ? "last 2 versions",
? ? "not ie <= 8"
? ]
}
[size=13]
[/size]

axios

每天进步一点点戏子 发表了文章 • 0 个评论 • 1696 次浏览 • 2018-01-16 11:25 • 来自相关话题

// src/api/index.js
import axios from 'axios'
const instance = axios.create({
// 根据自己的业务配置
baseURL: '/api',
withCredentials: true
})
instance.interceptors.request.use(config => {
// request 拦截器
// 比如添加 token
return config
})
instance.interceptors.response.use(response => {
// 返回数据
return response.data
}, error => {
// 处理错误码,比如 404跳转
return Promise.reject(error);
})
export default instance// src/main.js
import api from './api'
// 获取列表
api.get('users').then(response => {
console.log(response)
})
// 获取单个
api.get('users/1').then(response => {
console.log(response)
})
// 添加
api.post('users', { name: 'lopo' }).then(response => {
console.log(response)
})
// 修改
api.put('users/1', { name: 'vlopo' }).then(response => {
console.log(response)
})
// 删除
api.delete('users/1').then(response => {
console.log(response)
})?
?
? 查看全部
// src/api/index.js
import axios from 'axios'
const instance = axios.create({
// 根据自己的业务配置
baseURL: '/api',
withCredentials: true
})
instance.interceptors.request.use(config => {
// request 拦截器
// 比如添加 token
return config
})
instance.interceptors.response.use(response => {
// 返回数据
return response.data
}, error => {
// 处理错误码,比如 404跳转
return Promise.reject(error);
})
export default instance
// src/main.js
import api from './api'
// 获取列表
api.get('users').then(response => {
console.log(response)
})
// 获取单个
api.get('users/1').then(response => {
console.log(response)
})
// 添加
api.post('users', { name: 'lopo' }).then(response => {
console.log(response)
})
// 修改
api.put('users/1', { name: 'vlopo' }).then(response => {
console.log(response)
})
// 删除
api.delete('users/1').then(response => {
console.log(response)
})
?
?
?

Vue axios 封装 拦截示例

VUElopo1983 发表了文章 • 0 个评论 • 2112 次浏览 • 2018-01-03 04:42 • 来自相关话题

?
封装export function ajax(url, params, type) {
let config = { method: type || 'post' }
if (type === 'GET') {
config.params = params
} else {
config.data = type ? {} : params
}
console.log(config)
return instance(url, config)
.then(response => {
return response.data
})
.catch(error => {
console.log('通信失败,请检查您的网络,或联系系统管理员')
})
}


?REQ拦截instance.interceptors.request.use(
function(config) {
if (Lockr.get('token')) {
config.headers.common['Authorization'] = Lockr.get('token')
}
return config
},
error => {
return Promise.reject(error)
}
)


RES拦截instance.interceptors.response.use(res => {
if (res.data.code) {
switch (res.data.code) {
case 401:
Lockr.rm('token')
window.location.href = '/#/admin/login/'
break
}
} else {
}
return res
})


?
使用FormData传递数据const instance = axios.create()
instance.defaults.headers.post['Content-Type'] = 'multipart/form-data'
instance.defaults.headers.put['Content-Type'] = 'multipart/form-data'
instance.defaults.headers.patch['Content-Type'] = 'multipart/form-data'



?使用接口
export default {
getList(display = '7', page = '1', db, type = '1') {
let params = {
'display':display,
'current':page,
'type':type
}
return ajax(db, params,'GET')
},
//
putList(db,id) {
let data = new FormData()
data.append('id',id)
return ajax(db, data,'PATCH')
}}


? 查看全部
?
封装
export function ajax(url, params, type) {
let config = { method: type || 'post' }
if (type === 'GET') {
config.params = params
} else {
config.data = type ? {} : params
}
console.log(config)
return instance(url, config)
.then(response => {
return response.data
})
.catch(error => {
console.log('通信失败,请检查您的网络,或联系系统管理员')
})
}


?REQ拦截
instance.interceptors.request.use(
function(config) {
if (Lockr.get('token')) {
config.headers.common['Authorization'] = Lockr.get('token')
}
return config
},
error => {
return Promise.reject(error)
}
)


RES拦截
instance.interceptors.response.use(res => {
if (res.data.code) {
switch (res.data.code) {
case 401:
Lockr.rm('token')
window.location.href = '/#/admin/login/'
break
}
} else {
}
return res
})


?
使用FormData传递数据
const instance = axios.create()
instance.defaults.headers.post['Content-Type'] = 'multipart/form-data'
instance.defaults.headers.put['Content-Type'] = 'multipart/form-data'
instance.defaults.headers.patch['Content-Type'] = 'multipart/form-data'



?使用接口

export default {
getList(display = '7', page = '1', db, type = '1') {
let params = {
'display':display,
'current':page,
'type':type
}
return ajax(db, params,'GET')
},
//
putList(db,id) {
let data = new FormData()
data.append('id',id)
return ajax(db, data,'PATCH')
}}


?

vue-cli+pug+less+vuex+vue-form+axios+lodash webpack.json

VUElopo1983 发表了文章 • 1 个评论 • 2473 次浏览 • 2017-05-03 16:31 • 来自相关话题

{
? "name": "qdcenter",
? "version": "1.0.0",
? "description": "qiduo new user center",
? "author": "lopo <lopo1983@foxmail.com>",
? "private": true,
? "scripts": {
? ? "dev": "node build/dev-server.js",
? ? "start": "node build/dev-server.js",
? ? "build": "node build/build.js"
? },
? "dependencies": {
? ? "vue": "^2.2.6",
? ? "vue-router": "^2.3.1"
? },
? "devDependencies": {
? ? "animate.css": "^3.5.2",
? ? "autoprefixer": "^6.7.2",
? ? "available": "^2.0.3",
? ? "axios": "^0.15.3",
? ? "babel-core": "^6.22.1",
? ? "babel-loader": "^6.2.10",
? ? "babel-plugin-transform-runtime": "^6.22.0",
? ? "babel-polyfill": "^6.23.0",
? ? "babel-preset-env": "^1.2.1",
? ? "babel-preset-stage-2": "^6.22.0",
? ? "babel-register": "^6.22.0",
? ? "bce-sdk-js": "^0.2.7",
? ? "bootstrap": "^3.3.7",
? ? "chalk": "^1.1.3",
? ? "connect-history-api-fallback": "^1.3.0",
? ? "copy-webpack-plugin": "^4.0.1",
? ? "css-loader": "^0.26.1",
? ? "echarts": "^3.6.1",
? ? "eventsource-polyfill": "^0.9.6",
? ? "express": "^4.14.1",
? ? "extract-text-webpack-plugin": "^2.0.0",
? ? "file-loader": "^0.10.1",
? ? "friendly-errors-webpack-plugin": "^1.1.3",
? ? "function-bind": "^1.1.0",
? ? "html-webpack-plugin": "^2.28.0",
? ? "http-proxy-middleware": "^0.17.3",
? ? "less": "^2.7.2",
? ? "less-loader": "^3.0.0",
? ? "lodash": "^4.17.4",
? ? "opn": "^4.0.2",
? ? "optimize-css-assets-webpack-plugin": "^1.3.0",
? ? "ora": "^1.1.0",
? ? "pug": "^2.0.0-beta.12",
? ? "pug-filters": "^2.1.2",
? ? "pug-loader": "^2.3.0",
? ? "rimraf": "^2.6.0",
? ? "semver": "^5.3.0",
? ? "style-loader": "^0.14.1",
? ? "url-loader": "^0.5.7",
? ? "vue": "^2.3.3",
? ? "vue-event-calendar": "^1.3.0",
? ? "vue-form": "^4.1.1",
? ? "vue-loader": "^11.1.4",
? ? "vue-router": "^2.5.3",
? ? "vue-style-loader": "^2.0.0",
? ? "vue-template-compiler": "^2.2.4",
? ? "vuex": "^2.2.1",
? ? "webpack": "^2.3.3",
? ? "webpack-dev-middleware": "^1.10.0",
? ? "webpack-hot-middleware": "^2.18.0",
? ? "webpack-merge": "^4.1.0"
? },
? "engines": {
? ? "node": ">= 4.0.0",
? ? "npm": ">= 3.0.0"
? },
? "browserslist": [
? ? "> 1%",
? ? "last 2 versions",
? ? "not ie <= 8"
? ]
}
[size=13]
[/size] 查看全部
{
? "name": "qdcenter",
? "version": "1.0.0",
? "description": "qiduo new user center",
? "author": "lopo <lopo1983@foxmail.com>",
? "private": true,
? "scripts": {
? ? "dev": "node build/dev-server.js",
? ? "start": "node build/dev-server.js",
? ? "build": "node build/build.js"
? },
? "dependencies": {
? ? "vue": "^2.2.6",
? ? "vue-router": "^2.3.1"
? },
? "devDependencies": {
? ? "animate.css": "^3.5.2",
? ? "autoprefixer": "^6.7.2",
? ? "available": "^2.0.3",
? ? "axios": "^0.15.3",
? ? "babel-core": "^6.22.1",
? ? "babel-loader": "^6.2.10",
? ? "babel-plugin-transform-runtime": "^6.22.0",
? ? "babel-polyfill": "^6.23.0",
? ? "babel-preset-env": "^1.2.1",
? ? "babel-preset-stage-2": "^6.22.0",
? ? "babel-register": "^6.22.0",
? ? "bce-sdk-js": "^0.2.7",
? ? "bootstrap": "^3.3.7",
? ? "chalk": "^1.1.3",
? ? "connect-history-api-fallback": "^1.3.0",
? ? "copy-webpack-plugin": "^4.0.1",
? ? "css-loader": "^0.26.1",
? ? "echarts": "^3.6.1",
? ? "eventsource-polyfill": "^0.9.6",
? ? "express": "^4.14.1",
? ? "extract-text-webpack-plugin": "^2.0.0",
? ? "file-loader": "^0.10.1",
? ? "friendly-errors-webpack-plugin": "^1.1.3",
? ? "function-bind": "^1.1.0",
? ? "html-webpack-plugin": "^2.28.0",
? ? "http-proxy-middleware": "^0.17.3",
? ? "less": "^2.7.2",
? ? "less-loader": "^3.0.0",
? ? "lodash": "^4.17.4",
? ? "opn": "^4.0.2",
? ? "optimize-css-assets-webpack-plugin": "^1.3.0",
? ? "ora": "^1.1.0",
? ? "pug": "^2.0.0-beta.12",
? ? "pug-filters": "^2.1.2",
? ? "pug-loader": "^2.3.0",
? ? "rimraf": "^2.6.0",
? ? "semver": "^5.3.0",
? ? "style-loader": "^0.14.1",
? ? "url-loader": "^0.5.7",
? ? "vue": "^2.3.3",
? ? "vue-event-calendar": "^1.3.0",
? ? "vue-form": "^4.1.1",
? ? "vue-loader": "^11.1.4",
? ? "vue-router": "^2.5.3",
? ? "vue-style-loader": "^2.0.0",
? ? "vue-template-compiler": "^2.2.4",
? ? "vuex": "^2.2.1",
? ? "webpack": "^2.3.3",
? ? "webpack-dev-middleware": "^1.10.0",
? ? "webpack-hot-middleware": "^2.18.0",
? ? "webpack-merge": "^4.1.0"
? },
? "engines": {
? ? "node": ">= 4.0.0",
? ? "npm": ">= 3.0.0"
? },
? "browserslist": [
? ? "> 1%",
? ? "last 2 versions",
? ? "not ie <= 8"
? ]
}
[size=13]
[/size]