1,axios 簡介與安裝
1、axios簡介
- vue本身不支持發送AJAX請求,需要使用vue-resource、axios等插件實現
- axios是一個基於Promise的HTTP請求客戶端,用來發送請求,也是vue2.0官方推薦的,同時不再對vue-resource進行更新和維護
- 參考:GitHub上搜索axios,查看API文檔:https://github.com/axios/axios
2、安裝axios
- npm install axios -S # 也可直接下載axios.min.js文件
- 下載後即到 C:\Users\tom\node_modules\axios\dist 路徑下找到 axios.min.js 文件
2,axios 基本用法
1、 axios最基本使用
- get: axios最基本get請求參數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發送AJAX請求</title>
</head>
<body>
<div id="itany">
<button @click="sendGet">GET方式發送AJAX請求</button>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
uid:''
},
methods:{
sendGet(){
// 1、發送get請求
axios({
url: 'http://127.0.0.1:8000/data/', //1、請求地址
method: 'get', //2、請求方法
params: {ids: [1,2,3],type: 'admin'}, //3、get請求參數
})
// 2、回調函數
.then(resp => {
console.log(resp.data);
})
// 3、捕獲異常
.catch(err => {
console.log('請求失敗:'+err.status+','+err.statusText);
});
}
}
});
}
</script>
</body>
</html>
- post: axios發送最基本post請求參數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發送AJAX請求</title>
</head>
<body>
<div id="itany">
<button @click="sendPost">POST方式發送AJAX請求</button>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
uid:''
},
methods:{
sendPost(){
// 1、發送post請求
axios({
url: 'http://127.0.0.1:8000/data/', //1、請求地址
method: 'post', // 2、請求方法
data: {ids: [1,2,3],type: 'admin'}, //3、提交數據
transformRequest:[ //4、在發送請求前可以改變要傳的數據
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&'; //5、拼接成:name=alice&age=20& 的字符串
}
return params;
}
]
})
// 2、回調函數
.then(resp => {
console.log(resp.data);
})
// 3、捕獲異常
.catch(err => {
console.log('請求失敗:'+err.status+','+err.statusText);
});
}
}
});
}
</script>
</body>
</html>
2、axios藉助Qs對提交數據進行序列化
axios參考博客:https://www.jianshu.com/p/68d81da4e1ad
https://www.cnblogs.com/yiyi17/p/9409249.html
- get:axios發送get請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發送AJAX請求</title>
</head>
<body>
<div id="itany">
<button @click="sendGet">GET方式發送AJAX請求</button>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
uid:''
},
methods:{
sendGet(){
// 1、發送get請求
axios({
url: 'http://127.0.0.1:8000/data/', //1、請求地址
method: 'get', //2、請求方法
params: {ids: [1,2,3],type: 'admin'}, //3、get請求參數
paramsSerializer: params => { //4、可選函數、序列化`params`
return Qs.stringify(params, { indices: false })
},
responseType: 'json', //5、返回默認格式json
headers: {'authorization': 'xxxtokenidxxxxx'}, //6、認證token
})
// 2、回調函數
.then(resp => {
console.log(resp.data);
})
// 3、捕獲異常
.catch(err => {
console.log('請求失敗:'+err.status+','+err.statusText);
});
}
}
});
}
</script>
</body>
</html>
- post: axios發送post請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發送AJAX請求</title>
</head>
<body>
<div id="itany">
<button @click="sendPost">POST方式發送AJAX請求</button>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
uid:''
},
methods:{
sendPost(){
// 1、發送post請求
axios({
url: 'http://127.0.0.1:8000/data/', //1、請求地址
method: 'post', // 2、請求方法
data: Qs.stringify( //3、可選函數、序列化`data`
{ids: [1,2,3],type: 'admin'}, //4、提交數據
{ indices: false } // indices: false
),
responseType: 'json', //5、返回默認格式json
headers: {'authorization': 'xxxtokenidxxxxx'},//6、身份驗證token
})
// 2、回調函數
.then(resp => {
console.log(resp.data);
})
// 3、捕獲異常
.catch(err => {
console.log('請求失敗:'+err.status+','+err.statusText);
});
}
}
});
}
</script>
</body>
</html>
- views.py後端測試接口
def data(request):
if request.method == 'GET':
token_id = request.META.get('HTTP_AUTHORIZATION') # header中的tokenid
print(request.GET.getlist('ids')) # 獲取get請求中列表
data = {
'id':1,
'name': 'zhangsan'
}
return HttpResponse(json.dumps(data))
elif request.method == 'POST':
token_id = request.META.get('HTTP_AUTHORIZATION') # header中的tokenid
print(request.POST.getlist('ids')) # 獲取post請求中的列表
data = {
'id':1,
'name': 'zhangsan',
'method': 'POST'
}
return HttpResponse(json.dumps(data))
#1、qs用途: 在 axios中,利用QS包裝data數據
#2、安 裝: npm install qs -S
#3、常見用法:
'''
import Qs from 'qs';
Qs.stringify(data);
Qs.parse(data)
'''
3、vuejs藉助axios發送ajax請求(同級目錄下創建以下兩個文件)
- user.json
{
"id":1001,
"name":"秋香",
"age":18
}
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發送AJAX請求</title>
</head>
<body>
<div id="itany">
<button @click="send">發送AJAX請求</button>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
user:{
// name:'alice',
// age:19
},
uid:''
},
methods:{
send(){
axios({
method:'get',
url:'user.json'
}).then(function(resp){ // 請求成功調用此函數
console.log(resp.data); // {id: 1001, name: "秋香", age: 18}
}).catch(resp => { // 請求失敗調用此函數
console.log('請求失敗:'+resp.status+','+resp.statusText);
})
}
}
});
}
</script>
</body>
</html>
- 例2:發送get請求,輸入GitHub用戶id獲取用戶名和頭像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發送AJAX請求</title>
</head>
<body>
<div id="itany">
GitHub ID: <input type="text" v-model="uid">
<button @click="getUserById(uid)">獲取指定GitHub賬戶信息並顯示</button>
<br>
姓名:{{user.name}} <br>
頭像:<img :src="user.avatar_url" alt="">
<hr>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
uid:''
},
methods:{
getUserById(uid){
axios.get(`https://api.github.com/users/${uid}`)
.then(resp => {
// console.log(resp.data);
this.user=resp.data;
});
},
}
});
}
</script>
</body>
</html>
3,使用vue-resource發送跨域請求
1、安裝vue-resource並引入
- cnpm install vue-resource -S
- 參考:GitHub上搜索 vue-resource ,查看API文檔:https://github.com/pagekit/vue-resource
2、基本用法
使用this.$http發送請求
this.$http.get(url, [options])
this.$http.head(url, [options])
this.$http.delete(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])
this.$http.put(url, [body], [options])
this.$http.patch(url, [body], [options])
3、使用
- 向360搜索發送JSONP請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發送AJAX請求</title>
</head>
<body>
<div id="itany">
<button @click="sendJSONP">向360搜索發送JSONP請求</button>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
uid:''
},
methods:{
sendJSONP(){
//https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
this.$http.jsonp('https://sug.so.360.cn/suggest',{
params:{
word:'python' // 要查詢的內容
}
}).then(resp => {
console.log(resp.data.s); // 返回的查詢結果
// ["python官網", "python視頻教程", "python 培訓", "python基礎教程", "python下載", ]
});
},
}
});
}
</script>
</body>
</html>
- 向百度搜索發送JSONP請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發送AJAX請求</title>
</head>
<body>
<div id="itany">
<button @click="sendJSONP2">向百度搜索發送JSONP請求</button>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
uid:''
},
methods:{
sendJSONP2(){
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1420_21118_17001_21931_23632_22072&req=2&csor=1&cb=jQuery110208075694879886905_1498805938134&_=1498805938138
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'a'
},
jsonp:'cb' //百度使用的jsonp參數名爲cb,所以需要修改
}).then(resp => {
console.log(resp.data.s);
// ["愛奇藝", "阿黛爾", "艾力紳", "阿里雲", "阿里巴巴", "安居客", ]
});
}
}
});
}
</script>
</body>
</html>
4、發送get請求,並將請求內容添加到插件中
get(url, option)
Url :表示請求地址
Option :表示請求配置
Params :定義query數據
- 發送get請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>vue實例化對象</h1>
<router-view></router-view> <!--定義渲染容器-->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript" src="vue-resource.min.js"></script>
<script>
var Home = {
template:'<h1>home--{{data}}</h1>',
data:function () {
return {
data:''
}
},
created:function () {
this.$http.get('demo.json?123',{
params:{
color:'red'
}
})
.then(function (res) {
this.data = res.data.name // res.data 是請求獲取的內容
})
}
};
// 第一步:定義路由規則
var routes = [
{
path:'/home',
name:'home',
component:Home
},
];
// 第二步:實例化路由對象
var router = new VueRouter({
routes:routes
});
// 第三步:在vue實例化對象中註冊路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
5、發送post請求
post(url, data, option)
Url :表示請求地址
Data :表示請求的數據
Option :表示請求的配置
Params :定義query數據
- 發送post請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>vue實例化對象</h1>
<router-view></router-view> <!--定義渲染容器-->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript" src="vue-resource.min.js"></script>
<script>
var Home = {
template:'<h1>home--{{data}}</h1>',
data:function () {
return {
data:''
}
},
created:function () {
this.$http.post('demo.json?123',{'arg1':'price'},{
params:{
b:200
}
})
.then(function (res) {
this.data = res.data.name // res.data 是請求獲取的內容
})
}
};
// 第一步:定義路由規則
var routes = [
{
path:'/home',
name:'home',
component:Home
},
];
// 第二步:實例化路由對象
var router = new VueRouter({
routes:routes
});
// 第三步:在vue實例化對象中註冊路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
4,封裝axios請求
1、初始化環境
vue init webpack deaxios
npm install axios –S
cnpm install vuex -S
2、封裝axios(創建 src/api 文件夾)
- config\urls.js 配置全局url變量
export default {
// api請求地址
// API_URL: 'http://mup.dev.yiducloud.cn/'
API_URL: 'http://1.1.1.3:8888'
}
- src\api\ajax.js
import Axios from 'axios'
import URLS from '../../config/urls'
//1、使用自定義配置新建一個 axios 實例
const instance = Axios.create({
baseURL: URLS.API_URL,
headers: {
'Content-Type': 'application/json'
}
});
//2、添加請求攔截器
instance.interceptors.request.use(
config => {
//發送請求前添加認證token
config.headers.Authorization = sessionStorage.getItem('token')
// console.log(sessionStorage.getItem('token'),11223344)
return config
},
err => {
return Promise.reject(err)
});
//3、添加響應攔截器
instance.interceptors.response.use(function (response) {
// 對響應數據處理
if (response.status === 200 || response.status === 201 || response.status === 400) {
const data = response.data
if (data.code === 200 || data.code === 201) {
return data
}
}
return Promise.reject(response)
}, function (error) {
if (error.response) {
switch (error.response.status) {
case 400:
return Promise.reject(error.response.data)
case 401:
window.location.href = '/login'
}
}
// const errorData = error.response.data
// if (errorData.code === 400) {
// return Promise.reject(errorData.desc)
// }
// return Promise.reject(errorData)
})
// export const getNodegroups = params => { return instance.get(`${base}/nodegroup/v1/nodegroups/list/`, params).then(res => res.data) }
// export const getNodegroups = params => { return instance.get(`/nodegroup/v1/nodegroups/list/`, params).then(res => res) }
export default instance
- src\api\api.js
import URLS from '../../config/urls'
import ajax from './ajax'
let base = URLS.API_URL
// 用戶相關
export const requestLogin = params => { return ajax.post(`${base}/users/v1/user/login/`, params).then(res => res) }
- src\api\index.js
import * as api from './api'
export default api
3、使用vuex
- src\store\index.js
import Vue from 'vue'
import Vuex from 'vuex'
import login from './modules/login/login'
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
login
}
});
- src\store\modules\login\login.js
import {
requestLogin,
} from '../../../api/api' // 導入封裝後的axios請求
const state = {}
const getters = {}
const actions = {
async loginMethod ({commit}, params) {
return requestLogin(params).then(response => response)
},
};
const mutations = {}
export default {
state,
getters,
actions,
mutations
}
4、入口
- main.js 導入store
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
- App.vue 組件發送請求
<template>
<div id="app">
<p @click="handleLogin">點擊發送axiso請求</p>
<router-view/>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'App',
methods: {
...mapActions(['loginMethod']),
handleLogin () {
var loginParams = { username: 'zhangsan', password: '123456' }
this.loginMethod(loginParams).then(response => {
// this.logining = false
sessionStorage.setItem('token', response.data)
// this.$router.push({ path: '/' })
}).catch(error => {
this.loading = false
this.error(error.desc ? error.desc : '服務器異常')
})
}
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5、封裝axios作用
- 我們在此將此項目所用到的所有接口調用方法都做了定義,這樣既方便查看也利於管理。
- 在我們需要調用接口方法的時候,我們只需要在對應vue文件中的標籤裏直接import想用的接口方法就行了
例如:import { getOptList,branchList,addOperator } from “…/…/api/index”;
6、使用vuex發送get請求
- src\store\index.js
import Vue from 'vue'
import Vuex from 'vuex'
import meeting from './modules/meeting/meeting'
Vue.use(Vuex)
export default new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
modules: {
meeting
}
})
- src/store/modules/meeting/meeting.js
import {
getMeetingList
} from '../../../api/api'
import {getUrl} from "../../../utils/global/geturl"; // 導入封裝後的axios請求
const state = {};
const getters = {};
const actions = {
async getMeetingListMethod ({commit}, params) {
return getMeetingList(getUrl(params)).then(response => response)
},
};
const mutations = {};
export default {
state,
getters,
actions,
mutations
}
- src/views/meeting/index.vue
<template>
</template>
<script>
import { mapActions } from 'vuex'
export default {
data() {
return {};
},
methods: {
...mapActions(['getMeetingListMethod']),
// 獲取會議室信息
requestMeetingListMethod () {
var parms = {};
this.getMeetingListMethod(parms).then(response => {
console.log(123456)
console.log(response)
// this.tableData = response.data.data_list
// this.listQuery.total = response.data.total
this.loading = false
}).catch(error => {
this.loading = false;
this.error(error.desc ? error.desc : '服務器異常')
})
},
},
created(){
this.requestMeetingListMethod(); // 獲取會議室信息
},
};
</script>
<style scoped>
</style>