github开发者平台
https://docs.github.com/en
axios的安装与引入
npm i axios --save
import axios from "axios"
axios_api
基本的五种请求
## 1. get(查询)
axios(config) //config中包含url
例如:
axios({
url:"https://api.github.com/repos/betterDamu/bj_181130/issues",
method:"get",
headers:{
//令牌携带在请求头中
Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92"
}
})
****************************************************************************
axios(url,config)//config中不包含url
例如:
axios("https://api.github.com/repos/betterDamu/bj_181130/issues",
{
method:"get",
headers:{
//令牌携带在请求头中
Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92"
}
})
****************************************************************************
axios.get(url,config)//config中不包含url method
例如:
axios.get("https://api.github.com/repos/betterDamu/bj_181130/issues",
{
headers:{
//令牌携带在请求头中
Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92"
}
})
## 2. post(新增)
axios(config) //config中包含url
例如:
axios({
url:"https://api.github.com/repos/betterDamu/bj_181130/issues",
method:"post",
data: {title: this.title, body:this.body},
headers:{
Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92 "
}
})
************************************************************************************
axios(url,config)//config中不包含url
例如:
axios("https://api.github.com/repos/betterDamu/bj_181130/issues",
{
method:"post",
data: {title: this.title, body:this.body},
headers:{
Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92 "
}
})
***************************************************************************************
axio.post(url,**data**,config)// config中不包含url method data
例如:
axios.post("https://api.github.com/repos/betterDamu/bj_181130/issues",
{title: this.title, body:this.body},
{
headers:{
Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92 "
}
})
## 3. put(全量修改)
axios(config) //config中包含url
axios(url,config)//config中不包含url
axio.put(url,**data**,config)// config中不包含url method data
## 4. patch(局部修改)
axios(config) //config中包含url
axios(url,config)//config中不包含url
axio.patch(url,**data**,config)// config中不包含url method data
## 5. delete(删除)
axios(config) //config中包含url
axios(url,config)//config中不包含url
axios.delete(url,config)//config中不包含url method
补充:前端向后台传送数据可以通过 请求头,请求体,url ,cookie
并发请求
Promise.all
async mounted(){
const promise1 = axios.get("https://api.github.com/repos/betterDamu/bj_181130/issues")
const promise2 = axios.get("https://api.github.com/search/users?q=damu")
const [a,b] = await Promise.all([promise1,promise2]);
console.log(a,b);
axios.all:
const promise1 = axios.get("https://api.github.com/repos/betterDamu/bj_181130/issues")
const promise2 = axios.get("https://api.github.com/search/users?q=damu")
//const arr =await axios.all([promise1,promise2])
//console.log(arr);
axios.all([promise1,promise2]).then(axios.spread((a,b)=>{
console.log(a, b);
}))
}
axios实例
import axios from "axios";
const github = axios.create({
baseURL: 'https://api.github.com/repos/betterDamu/bj_181130',
timeout:10000,
headers:{
Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92"
}
})
export default github
将github请求实例挂到vue的显示原型上
Vue.prototype.$github=github
//实例发送请求
const promise1 = this.$github.get("/issues")
const promise2 = this.$github.get("https://api.github.com/search/users?q=damu")
const [a,b] = await Promise.all([promise1,promise2]);
console.log(a,b);
import axios from "axios"
const axiosins = axios.create(config) //将模块公共的配置定义在当前的config中
axiosins(config)
axiosins(url,config)
axiosins.get(url,config)
axiosins.delete(url,config)
axiosins.post(url,data,config)
axiosins.put(url,data,config)
axiosins.patch(url,data,config)
axios请求配置
baseURL:请求的基地址
url : 请求地址
headers: 请求头
data: 请求体
params: query数据
method: 请求方法
timeout: 超时时间
axios响应结构
{
data:接口返回的数据,
status:响应状态
}
axios的配置项可以在几个地方指定?
越往下,配置优先级越高
1. axios.defaults.配置项 = 值 //全局配置 axios.defaults.baseURL = 'https://api.example.com';
2. const axiosins = axios.create({配置项:值}) //实例级别的配置
3. axiosins(config) //请求级别的配置
4. 拦截器还可以改配置
拦截器
函数本身可以添加拦截器,实例也可以。这里是给实例添加:
// 添加请求拦截器
test.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.baseURL="https://testD.com"
return config;
});
// 添加响应拦截器
test.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});