axios請求參數格式,axios傳遞參數傳不過去，express搭建簡易服務器并代碼實現axios和 axios二次封裝的使用
一 index.js 搭建簡(jian)易服務器(qi)并創(chuang)建http接口(kou)
// 1. 導入express（前提是安裝了node和express）const express = require('express')// 2. 創建web服務器const app = express()/* 通過cors中間件可以解決跨域問題，需要npm i cors */const cors = require('cors')/* 通過bodyParser中間件可以解析到req.body，即瀏覽器端的請求參數npm i body-parser */const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())
app.use(cors())// 4. 監聽客戶端的get和post請求，并向客戶端響應具體的內容app.get('/todo', (req, res) => {console.log(req.query)const obj = {
name: 'zs',
age: 20}// 在路由中使用共享數據res.send(obj)
})
app.get('/book', (req, res) => {console.log('1111')console.log(req.query)const obj = {
author: '施耐庵',type: '小說'}// 在路由中使用共享數據res.send(obj)
})
app.post('/sg', (req, res) => {console.log('body', req.body)const obj = {
name: 'apple'}// 在路由中使用共享數據res.send(obj)
})// 3. 啟動服務器app.listen(8263, () => {console.log('啟動了express服務器：//127.0.0.1:8263')
})二 axios的使用和axios的二次封裝
<!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.0"><title>Document</title><script src="//unpkg.com/axios/dist/axios.min.js"></script></head><body><h1 onclick="changeText(this)" id="btn">axios去獲取數據</h1><h1 onclick="changeText1(this)" id="btn">instance1去獲取數據</h1><script>// FIRST: 在html頁面中使用axios以及請求攔截和響應攔截axios.defaults.baseURL = '//127.0.0.1:8263' // 不封裝axios時配置axios的基地址function changeText(id) {/* 一 使用axios(congig)調接口 */// 1. axios(congig)之--->>>get方法// axios({// url: '/book',// method: 'get',// params: {// book: '水滸傳'// }// }).then(res => {// console.log('res--->>>', res)// })// 2. axios(congig)之--->>>post方法// axios({// url: '/sg',// method: 'post',// data: {// place: 'china'// }// }).then(res => {// console.log('res--->>>', res)// })/* 二 使用axios.get調接口 */axios.get('/book?bookname=水滸傳').then(res => {console.log('res--->>>book---->>>>', res)
})/* 三 使用axios.post調接口 */// axios.post('/sg', { place: 'china'}).then(res => {// console.log('res---->>>>', res)// })}
axios.interceptors.request.use(config => {/*
在請求發出之前進行一些操作,比方說將token放到請求頭header中
***這時候會將這個token一塊放到header中進行http請求***
效果圖見/public/token.png
*/// config.headers.token = '2222'console.log('axios---->>>config現身')
config.headers.myParam = 'make it'return config
},
err => {//Do something with request errorconsole.log('axios--->>>>err現身')return Promise.reject(err)
}
)// SECOND: 在html頁面中使用axios二次封裝以及請求攔截和響應攔截// 1. 創建一個新的axios實例/*
使用axios直接調接口的時候，直接使用axios.interceptors,可以觸發請求攔截，給header添加屬性
使用axios直接調接口的時候，也可以直接觸發響應攔截的函數
使用實例instance調接口的時候，instance.interceptors觸發不了請求攔截（沒發現怎么能觸發？？？），
可以直接在axios實例中定義headers的屬性
使用實例調接口的時候，響應攔截也沒觸發，需要看看什么情況？？？
*/const instance1 = axios.create({baseURL: '//127.0.0.1:8263', // http請求的基地址timeout: 3000, // 請求的超時時間headers: {'X-Custom-Header': 'foobar', 'token': '5555'} // 請求頭})function changeText1(id) {// 2. 調用實例，發送請求// 2.1 實例的post方法// instance({// url: '/sg',// method: 'post',// data: {name: '窩草'}// }).then(res => {// console.log('res--axios--instance--post', res)// })// 2.2 實例的get方法// instance({// url: '/todo',// method: 'get',// params: {name: '哈哈'}// }).then(res => {// console.log('res--axios--instance--get', res)// })instance1.get('/book').then(res => {console.log('res--axios--instance--get', res)
})
}
instance1.interceptors.request.use(config => {/*
在請求發出之前進行一些操作,比方說將token放到請求頭header中
***這時候會將這個token一塊放到header中進行http請求***
效果圖見/public/token.png
*/// config.headers.token = '2222'console.log('instance--->>>>config現身')
config.headers.myParam = 'fuck it'return config
},
err => {//Do something with request errorconsole.log('instance--->>>>err現身')return Promise.reject(err)
}
)
instance1.interceptors.response.use(res => {console.log('res---interceptors', res)//在這里對返回的數據進行處理return res;
},
err => {//Do something with response errorreturn Promise.reject(err)
})</script><!--
axios學習文檔：
一 發送ajax請求
1. axios(config) --get、post、put、delete方法，其中put和post語法類似，參數都是用的data字段
2. axios.get axios.post axios.put axios.delete
二 axios.create(config)
1. 創建axios實例
2. 調用axios實例
--></body></html>
